Frontend Design

Use this skill to design frontend behavior and UI structure before or alongside implementation.

The Process

Step 1: Define UX objective

Capture:

• user goal
• primary user flow
• success state and failure states

Step 2: Specify UI architecture

Define:

• screen/layout structure
• component hierarchy
• state model (loading, empty, error, success)

Step 3: Specify design system decisions

Set:

• typography and spacing rules
• color/contrast constraints
• interaction patterns

Step 4: Specify responsive and accessibility requirements

Include:

• breakpoints and behavior changes
• keyboard navigation expectations
• ARIA/semantic requirements
• contrast and focus visibility requirements

Step 5: Define implementation handoff

Provide:

• component list and props/state contract
• acceptance criteria
• verification checklist

Output Format

# [Feature Name] Frontend Design Spec

## UX Objective
- User goal:
- Primary flow:
- Success/failure states:

## UI Architecture
- Layout:
- Component hierarchy:
- State model:

## Responsive Behavior
- Desktop:
- Tablet:
- Mobile:

## Accessibility Requirements
- Keyboard:
- Semantics/ARIA:
- Contrast/focus:

## Handoff
- Components to implement:
- Acceptance criteria:
- Verification checklist:

Quality Bar

• Design decisions must map to user goals
• Accessibility section is mandatory
• Handoff must be implementable without extra interpretation

When to Use

Use this skill when the task directly matches the workflow described above.

When Not to Use

Do not use this skill when the request is unrelated, low-stakes, or better handled by a simpler direct response.