design-handoff

# /design-handoff 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 make good judgment calls. ## Output ```markdown ## Handoff Spec: [Feature/Screen Name] ### Overview [What this screen/feature does, user context] ### Layout [Grid system, breakpoints, responsive behavior] ### Design Tokens Used | Token | Value | Usage | |-------|-------|-------| | `color-primary` | #[hex] | CTA buttons, links | | `spacing-md` | [X]px | Between sections | | `font-heading-lg` | [size/weight/family] | Page title | ### Components | Component | Variant | Props | Notes | |-----------|---------|-------|-------| | [Component] | [Variant] | [Props] | [Special behavior] | ### States and Interactions | Element | State | Behavior | |---------|-------|----------| | [CTA Button] | Hover | [Background darken 10%] | | [CTA Button] | Loading | [Spinner, disabled] | | [Form] | Error | [Red border, error message below] | ### Responsive Behavior | Breakpoint | Changes | |------------|---------| | Desktop (>1024px) | [Default layout] | | Tablet (768-1024px) | [What changes] | | Mobile (<768px) | [What changes] | ### Edge Cases - **Empty state**: [What to show when no data] - **Long text**: [Truncation rules] - **Loading**: [Skeleton or spinner] - **Error**: [Error state appearance] ### Animation / Motion | Element | Trigger | Animation | Duration | Easing | |---------|---------|-----------|----------|--------| | [Element] | [Trigger] | [Description] | [ms] | [easing] | ### Accessibility Notes - [Focus order] - [ARIA labels needed] - [Keyboard interactions] ``` ## If Connectors Available If **~~design tool** is connected: - Pull exact measurements, tokens, and component specs from Figma - Export assets and generate a complete spec sheet If **~~project tracker** is connected: - Link the handoff to the implementation ticket - Create sub-tasks for each section of the spec ## Tips 1. **Share the Figma link** — I can pull exact measurements, tokens, and component info. 2. **Mention edge cases** — "What happens with 100 items?" helps me spec boundary conditions. 3. **Specify the tech stack** — "We use React + Tailwind" helps me give relevant implementation notes.