mockup-extraction

<objective>
The mockup-extraction skill guides Claude in analyzing approved HTML mockups and extracting reusable components for implementation.

**Purpose**: Bridge the gap between visual mockups and production code by:
1. Identifying repeated UI patterns across mockup screens
2. Mapping mockup CSS classes to Tailwind utilities
3. Documenting component variants and states
4. Creating extraction tasks for systematic implementation

**When to invoke**: At the start of `/implement` phase when mockups exist and are approved (UI-first features).
</objective>

<quick_start>
<prerequisites>
Before extraction, verify:
1. Mockups exist in `specs/NNN-slug/mockups/` or `design/prototype/screens/`
2. Mockup approval gate passed in state.yaml
3. Theme files exist (theme.yaml, theme.css)
</prerequisites>

<basic_workflow>
1. **Inventory** - List all mockup HTML files
2. **Scan** - Parse HTML for component patterns
3. **Classify** - Categorize by component type
4. **Count** - Track occurrence frequency
5. **Map** - Convert CSS to Tailwind utilities
6. **Document** - Populate prototype-patterns.md
7. **Generate Tasks** - Create extraction tasks for tasks.md
</basic_workflow>

<extraction_output>
Generate `prototype-patterns.md` in feature directory:

```markdown
# Prototype Patterns: {FEATURE_NAME}

## Component Inventory
| Component | Source Screens | Occurrences | Priority |
|-----------|---------------|-------------|----------|
| Button Primary | login, signup, dashboard | 12 | Must extract |
| Card | dashboard, settings | 8 | Must extract |
| Form Input | login, signup, profile | 15 | Must extract |
| Alert | all screens | 6 | Consider extraction |

## Component Details

### Button Primary
- **CSS Classes**: `.btn`, `.btn-primary`
- **Tailwind**: `px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-hover`
- **States**: default, hover, focus, disabled, loading
- **Props**: `variant`, `size`, `icon`, `loading`

### Card
- **CSS Classes**: `.card`, `.card-elevated`
- **Tailwind**: `bg-surface p-4 rounded-lg shadow-md`
- **Variants**: default, elevated, bordered
- **Props**: `padding`, `shadow`, `header`, `footer`

## CSS to Tailwind Mapping
| CSS Variable | Tailwind Utility |
|--------------|------------------|
| var(--color-primary) | bg-primary, text-primary |
| var(--space-4) | p-4, m-4, gap-4 |
| var(--radius-md) | rounded-md |
| var(--shadow-md) | shadow-md |

## Visual Fidelity Checklist
- [ ] Spacing matches 8pt grid
- [ ] Colors use design tokens
- [ ] All states implemented (hover, focus, disabled)
- [ ] Typography uses scale
- [ ] Responsive breakpoints match
```
</extraction_output>
</quick_start>

<detailed_procedures>
<component_identification>
## Component Identification Rules

Scan mockup HTML for these patterns:

### Buttons
```
Selectors: button, [role="button"], .btn, .button
Variants: primary, secondary, outline, ghost, danger
States: default, hover, focus, active, disabled, loading
```

### Cards
```
Selectors: .card, [role="article"], .panel, .tile
Variants: default, elevated, bordered, interactive
Components: header, body, footer, actions
```

### Forms
```
Selectors: form, .form-group, .form-field, .input-group
Elements: input, textarea, select, checkbox, radio
States: default, focus, error, disabled, readonly
```

### Alerts/Notifications
```
Selectors: .alert, [role="alert"], .toast, .notification
Variants: info, success, warning, error
Components: icon, message, dismiss button
```

### Navigation
```
Selectors: nav, .nav, .navbar, .sidebar, .menu
Elements: links, dropdowns, icons, badges
States: active, hover, expanded
```

### Data Display
```
Selectors: table, .table, .list, .grid
Elements: header, rows, cells, pagination
States: loading, empty, error
```

### Modals/Dialogs
```
Selectors: .modal, [role="dialog"], .dialog, .drawer
Components: backdrop, header, body, footer, close button
States: open, closing
```
</component_identification>

<reusability_scoring>
## Reusability Scoring

Score components by occurrence frequency:

| Occurrences | Score | Action |
|-------------|-------|--------|
| 1 | Low | Inline styles OK |
| 2 | Medium | Consider extraction |
| 3+ | High | **Must extract** |
| 5+ | Critical | Extract with variants |

**Priority order for extraction:**
1. Components appearing on 5+ screens (Critical)
2. Components with 3+ variants (High)
3. Interactive components with multiple states (High)
4. Layout components (containers, grids) (Medium)
5. Static display components (Medium)
</reusability_scoring>

<css_tailwind_mapping>
## CSS to Tailwind Mapping

### Color Mappings
```
var(--color-primary) → bg-primary, text-primary, border-primary
var(--color-secondary) → bg-secondary, text-secondary
var(--color-neutral-*) → bg-neutral-*, text-neutral-*
var(--color-success) → bg-success, text-success
var(--color-error) → bg-error, text-error
```

### Spacing Mappings (8pt grid)
```
var(--space-1) → p-1, m-1, gap-1 (8px)
var(--space-2) → p-2, m-2, gap-2 (16px)
var(--space-3) → p-3, m-3, gap-3 (24px)
var(--space-4) → p-4, m-4, gap-4 (32px)
var(--space-6) → p-6, m-6, gap-6 (48px)
var(--space-8) → p-8, m-8, gap-8 (64px)
```

### Typography Mappings
```
var(--text-xs) → text-xs
var(--text-sm) → text-sm
var(--text-base) → text-base
var(--text-lg) → text-lg
var(--text-xl) → text-xl
var(--text-2xl) → text-2xl
var(--font-semibold) → font-semibold
var(--font-bold) → font-bold
```

### Border & Shadow Mappings
```
var(--radius-sm) → rounded-sm
var(--radius-md) → rounded-md
var(--radius-lg) → rounded-lg
var(--radius-full) → rounded-full
var(--shadow-sm) → shadow-sm
var(--shadow-md) → shadow-md
var(--shadow-lg) → shadow-lg
```

### Layout Mappings
```
display: flex → flex
display: grid → grid
flex-direction: column → flex-col
justify-content: center → justify-center
align-items: center → items-center
gap: var(--space-*) → gap-*
```
</css_tailwind_mapping>

<extraction_output_format>
## Extraction Output Format

For each extracted component, document:

```markdown
### Compone