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.
Security Assessment
About design-handoff
The design-handoff skill generates comprehensive developer handoff documentation from design files or descriptions. When a design is ready for implementation, this skill creates a complete specification sheet that bridges the gap between designers and developers, ensuring nothing is left to guesswork. It transforms visual designs into actionable technical specifications that developers can implement with confidence.
This skill produces detailed specs covering visual specifications (measurements, design tokens, responsive breakpoints), interaction specifications (hover states, animations, gestures), content specifications (character limits, truncation, empty states), and edge cases (missing data, long text, slow connections). It emphasizes using design tokens over hard-coded values, documenting all component states, and providing accessibility guidance including focus order, ARIA labels, and keyboard interactions. When connected to Figma, it can pull exact measurements and component specifications directly from the design file.
The skill is ideal for product teams practicing design-to-dev handoffs, frontend developers who need precise implementation specs, design systems teams documenting component libraries, and engineering managers establishing handoff standards. It's particularly valuable when working with component libraries, design systems, or any project where design fidelity and consistency matter. The output follows a structured markdown format covering layout, design tokens, components, states, responsive behavior, edge cases, animations, and accessibility requirements.
FAQ
Can this skill pull specifications directly from Figma?
Yes, when a Figma URL is provided and design tool connectors are available, the skill can extract exact measurements, design tokens, and component specifications directly from Figma. Otherwise, it works from design descriptions or screenshots.
What design systems or frameworks does this work with?
The skill is framework-agnostic and works with any design system. It references design tokens generically (like spacing-md, color-primary) which can map to any implementation (CSS variables, Tailwind, styled-components, etc.). Mentioning your specific tech stack helps generate more relevant implementation notes.
Does this replace designer-developer communication?
No, it complements communication by providing a structured baseline specification. Designers and developers should still discuss complex interactions, edge cases, and implementation constraints. The skill ensures common details like measurements, states, and responsive behavior are documented upfront.
What if the design doesn't specify all states or edge cases?
The skill will note missing specifications and recommend what should be clarified with the designer. It won't hallucinate unspecified behavior, but will highlight gaps like missing error states, loading states, or responsive breakpoints that need designer input.
Can this integrate with project tracking tools?
Yes, when project tracker connectors are available, the skill can link the handoff documentation to implementation tickets and create sub-tasks for each section of the specification, making it easier to track implementation progress.
Install design-handoff
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
anthropics/knowledge-work-plugins