design-handoff-to-engineering

name	design-handoff-to-engineering
description	Use when handing design to engineering. Handoff includes: tokens, component specs, edge cases, asset exports.

Design Handoff to Engineering

Designer + engineer = same document. Figma links, tokens, components, edge cases. Avoid 'designer throws over the wall'.

Handoff document contents

1. Figma file link with comment access
2. Token values (color, type, spacing)
3. Component specs (props, states, variants)
4. Edge cases (empty, loading, error, success)
5. Animation specs (duration, easing, sequence)
6. Responsive breakpoints + behavior
7. Asset exports (SVG, PNG, multiple resolutions)
8. Accessibility notes (aria, focus order)

Component spec format

## Button

### Variants
- Primary, Secondary, Tertiary

### States
- Default, Hover, Active, Disabled, Loading

### Props
- variant: 'primary' | 'secondary' | 'tertiary'
- size: 'sm' | 'md' | 'lg'
- disabled: boolean
- loading: boolean
- onClick: () => void

### Tokens
- Padding: var(--spacing-2) var(--spacing-3)
- Color: var(--accent) (primary)
- Hover: translateY(-1px)

Handoff process

1. Designer publishes Figma file with public link
2. Designer writes spec doc in repo
3. Engineer reads spec + asks questions in Figma comments
4. Engineer implements
5. Designer reviews PR (designer reviews CODE, not just rendered output)
6. Iterate until shipped

Where this fits in the X3 empire

Used as standard practice for CardPrepAI design+engineering handoff (in our case, Claude + Joshua).