design-handofflisted

# /design-handoff > If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md). Generate comprehensive developer handoff documentation from a design. ## Usage ``` /design-handoff $ARGUMENTS ``` Generate handoff specs for: @$1 If a Figma URL is provided, pull the design from Figma. Otherwise, work from the provided description or screenshot. ## What to Include ### Visual Specifications - Exact measurements (padding, margins, widths) - Design token references (colors, typography, spacing) - Responsive breakpoints and behavior - Component variants and states ### Interaction Specifications - Click/tap behavior - Hover states - Transitions and animations (duration, easing) - Gesture support (swipe, pinch, long-press) ### Content Specifications - Character limits - Truncation behavior - Empty states - Loading states - Error states ### Edge Cases - Minimum/maximum content - International text (longer strings) - Slow connections - Missing data ### Accessibility - Focus order - ARIA labels and roles - Keyboard interactions - Screen reader announcements ## Principles 1. **Don't assume** — If it's not specified, the developer will guess. Specify everything. 2. **Use tokens, not values** — Reference `spacing-md` not `16px`. 3. **Show all states** — Default, hover, active, disabled, loading, error, empty. 4. **Describe the why** — "This collapses on mobile because users primarily use one-handed" helps developers ma