---
name: frontend-design
description: Design implementation-ready frontend solutions with UX intent, component structure, responsive behavior, accessibility, and handoff criteria.
---

# 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

```markdown
# [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.