← All skill packs

UI Design & Frontend Skills

Skill pack
22 skills0 selected
jukrapSkills in this pack

Use when implementing, debugging, or reviewing frontend/backend API integration, DTO mapping, mock-vs-remote behavior, request payloads, response adapters, or uncertain backend contracts.

English

Use when staging files, writing commits, pushing branches, opening PRs, preparing release notes, or recording worklogs in repositories with local-only docs or careful branch policies.

English

Use when a repository explicitly prefers stylesheets, CSS modules, scoped CSS, or semantic class names for UI styling.

English

Use when a repository has shared UI components, design tokens, variants, or a design system that should be reused before custom styling.

English

Use when a repository explicitly prefers component-local inline styles for UI work, or when the user asks to follow an inline-style-first convention.

English

Use when maintaining Android apps that load local or remote web assets in WebView and connect them to native behavior through JavaScript bridges, permissions, or device APIs.

English

Use when maintaining scheduled batches, cron jobs, Windows Task Scheduler, CSV/Excel import-export, SFTP/file drops, EDI-like transfers, or nightly integrations.

English

Use when maintaining legacy systems where business rules live in stored procedures, triggers, views, direct SQL, scheduled jobs, or database-shaped contracts.

English

Use when maintaining ASP.NET Web Forms, .NET Framework, code-behind pages, ViewState, postback events, Web.config, IIS, or old enterprise .NET web apps.

English

Use when adding new behavior, screens, fields, business rules, or integrations to a legacy system without rewriting the surrounding architecture.

English

Use when maintaining or extending a legacy codebase with unclear runtime flow, old conventions, hidden coupling, weak tests, or mixed documentation.

English

Use when maintaining intranet systems that depend on IE mode, ActiveX, old browser APIs, document modes, device plugins, or enterprise compatibility constraints.

English

Use when maintaining legacy Java Spring MVC, JSP, Servlet, MyBatis, WAR deployment, XML config, or server-rendered Java web applications.

English

Use when maintaining browser pages built with jQuery, plugins, direct DOM manipulation, global scripts, AJAX callbacks, or script-order dependent behavior.

English

Use when maintaining legacy PHP/LAMP applications with include files, sessions, mixed HTML/PHP pages, direct SQL, globals, form posts, or shared hosting constraints.

English

Use when maintaining report generation, print preview, PDF/Excel export, barcode/label printing, invoices, templates, or printer/device-specific output flows.

English

Use when changing legacy code that may affect global state, shared CSS/JS, common selectors, templates, forms, API contracts, build output, or deployment behavior.

English

Use when maintaining server-rendered web pages with templates, controllers, form posts, server validation, sessions, layouts, partials, or mixed server/client behavior.

English

Use when creating, reorganizing, or reviewing project AI docs such as AGENTS.md, PROJECTSPEC.md, PLANS.md, FSD.md, docs/plans, worklogs, or local-only documentation.

English

Onboard quickly to this repository. Use when asked to understand architecture, locate ownership, choose the right module, or identify the correct commands and verification strategy before coding.

English

Use when reviewing or improving UI styling, responsive behavior, CSS structure, inline styles, design polish, layout overflow, or visual regressions without changing product intent.

English

Use when a repository explicitly prefers utility-first CSS, Tailwind-style classes, or atomic class composition for UI styling.

English

Includes API Contract Boundary, Commit Worklog Guardrails, CSS Class First, and other workflows.

Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI

Supported by the Atlas install prompt. Skill-specific requirements vary.

Pack stats

Skills22CategorygeneralStars0

What’s included

API Contract Boundary

Use when implementing, debugging, or reviewing frontend/backend API integration, DTO mapping, mock-vs-remote behavior, request payloads, response adapters, or uncertain backend contracts.

Commit Worklog Guardrails

Use when staging files, writing commits, pushing branches, opening PRs, preparing release notes, or recording worklogs in repositories with local-only docs or careful branch policies.

CSS Class First

Use when a repository explicitly prefers stylesheets, CSS modules, scoped CSS, or semantic class names for UI styling.

Design System First

Use when a repository has shared UI components, design tokens, variants, or a design system that should be reused before custom styling.

Inline Style First

Use when a repository explicitly prefers component-local inline styles for UI work, or when the user asks to follow an inline-style-first convention.

Legacy Android Webview Hybrid

Use when maintaining Android apps that load local or remote web assets in WebView and connect them to native behavior through JavaScript bridges, permissions, or device APIs.

Legacy Batch File Transfer

Use when maintaining scheduled batches, cron jobs, Windows Task Scheduler, CSV/Excel import-export, SFTP/file drops, EDI-like transfers, or nightly integrations.

Legacy Database Heavy System

Use when maintaining legacy systems where business rules live in stored procedures, triggers, views, direct SQL, scheduled jobs, or database-shaped contracts.

Legacy Dotnet Webforms

Use when maintaining ASP.NET Web Forms, .NET Framework, code-behind pages, ViewState, postback events, Web.config, IIS, or old enterprise .NET web apps.

Legacy Feature Addition

Use when adding new behavior, screens, fields, business rules, or integrations to a legacy system without rewriting the surrounding architecture.

Legacy General

Use when maintaining or extending a legacy codebase with unclear runtime flow, old conventions, hidden coupling, weak tests, or mixed documentation.

Legacy Ie Activex Compat

Use when maintaining intranet systems that depend on IE mode, ActiveX, old browser APIs, document modes, device plugins, or enterprise compatibility constraints.

Legacy Java Spring Mvc

Use when maintaining legacy Java Spring MVC, JSP, Servlet, MyBatis, WAR deployment, XML config, or server-rendered Java web applications.

Legacy Jquery Web

Use when maintaining browser pages built with jQuery, plugins, direct DOM manipulation, global scripts, AJAX callbacks, or script-order dependent behavior.

Legacy Php Lamp

Use when maintaining legacy PHP/LAMP applications with include files, sessions, mixed HTML/PHP pages, direct SQL, globals, form posts, or shared hosting constraints.

Legacy Reporting Printing

Use when maintaining report generation, print preview, PDF/Excel export, barcode/label printing, invoices, templates, or printer/device-specific output flows.

Legacy Risk Check

Use when changing legacy code that may affect global state, shared CSS/JS, common selectors, templates, forms, API contracts, build output, or deployment behavior.

Legacy Server Rendered Web

Use when maintaining server-rendered web pages with templates, controllers, form posts, server validation, sessions, layouts, partials, or mixed server/client behavior.

Project Doc System

Use when creating, reorganizing, or reviewing project AI docs such as AGENTS.md, PROJECTSPEC.md, PLANS.md, FSD.md, docs/plans, worklogs, or local-only documentation.

Repo Onboarding

Onboard quickly to this repository. Use when asked to understand architecture, locate ownership, choose the right module, or identify the correct commands and verification strategy before coding.

Style Quality Review

Use when reviewing or improving UI styling, responsive behavior, CSS structure, inline styles, design polish, layout overflow, or visual regressions without changing product intent.

Utility Class First

Use when a repository explicitly prefers utility-first CSS, Tailwind-style classes, or atomic class composition for UI styling.

Quick start

  1. Choose your skills. Select individual skills above, or choose the entire pack.
  2. Copy the install prompt. Use Copy install prompt above the list.
  3. Send it to your agent. Paste into your coding agent’s chat. Your agent reviews the source and guides the setup.

Try it with your agent

After installation, start with a request like:

Example request
Use the API Contract Boundary skill to help with my task.
Ask me for the context you need before getting started.

Requirements & license

  • A coding agent that can access your project files and install skills.
  • Your agent checks each skill’s instructions, dependencies, and permissions during setup.
  • Reported license for the skills shown: MIT. The author’s terms apply.
UI Design & Frontend Skills | Agent Skills Atlas