| name | design-handoff |
| description | Create comprehensive developer handoff documentation from designs. Trigger with "handoff to engineering", "developer specs", "implementation notes", "design specs for developers", or when a design needs to be translated into detailed implementation guidance. |
Design Handoff
Create clear, complete handoff documentation so developers can implement designs accurately.
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
- Don't assume - If it's not specified, the developer will guess. Specify everything.
- Use tokens, not values - Reference
spacing-md not 16px.
- Show all states - Default, hover, active, disabled, loading, error, empty.
- Describe the why - "This collapses on mobile because users primarily use one-handed" helps developers make good judgment calls.
