frontend-dev

Frontend Dev

This skill is a compact execution guide for frontend subtasks. It produces production-quality UI that looks modern and polished out of the box.

When To Use

Use this skill when the current subtask is primarily about:

• building or updating a screen, page, modal, form, table, or dashboard
• wiring UI state to existing APIs
• improving responsive layout, empty/loading/error states, and interaction quality
• refining visual hierarchy, typography, spacing, and motion

Do not use it as a reason to redesign unrelated parts of the app.

Operating Rules

1. Read the local project first.
2. Follow the repo's existing framework, routing, state, and styling conventions.
3. Prefer modifying existing components over introducing parallel abstractions.
4. Keep the write scope bounded to the current subtask.

Technology Selection (when no existing preference)

When the project has no established frontend or you are starting fresh:

Preferred stack (unless plan specifies otherwise):

• React + Tailwind CSS — default for web apps
• shadcn/ui components if React is used — modern, accessible, customizable
• Lucide icons — consistent, lightweight icon set

Do NOT reach for:

• Heavy UI frameworks (Material UI, Ant Design) unless specifically required
• CSS-in-JS (styled-components, emotion) when Tailwind is available
• Custom icon systems when Lucide/Heroicons exist

Design System Principles

Color

• Use a neutral base (slate/zinc/gray) for backgrounds and text
• Use one primary accent color for CTAs and interactive elements
• Use semantic colors for status: green=success, red=error, amber=warning, blue=info
• Dark text on light backgrounds: text-gray-900 on bg-white
• Ensure contrast ratio >= 4.5:1 for text (WCAG AA)

Example Tailwind palette:

bg-white / bg-gray-50 / bg-gray-100    — surface layers
text-gray-900 / text-gray-600          — primary / secondary text
bg-blue-600 / hover:bg-blue-700        — primary action
bg-red-50 text-red-700                  — error state
bg-green-50 text-green-700             — success state