Agent skill · design visual · anthropics
design-handoff
Generate developer handoff specs from a design. Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, and animation details.
Why this skill is useful
Generates detailed developer handoff documentation that includes specific design tokens, layout specifications, and interaction states not typically found in generic design resources.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 23,345 stars on the source repository.
What this skill does
/design-handoff If you see unfamiliar placeholders or need to check which tools are connected, see CONNECTORS.md. Generate comprehensive developer handoff documentation from a design. Usage 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 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.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills anthropics/design-handoff