Writes a complete design handoff document covering components, design tokens, interaction states, and edge cases for engineering implementation.
Writes a complete design handoff document covering components, design tokens, interaction states, and edge cases for engineering implementation. Use when handing off a feature or screen to developers.This is the skill's description: the text your AI reads to decide when the skill applies.
design-handoff-doc/SKILL.md
---
name: Design Handoff Doc
description: Writes a complete design handoff document covering components, design tokens, interaction states, and edge cases for engineering implementation. Use when handing off a feature or screen to developers.
---
# Design Handoff Doc
A handoff document is the single source of truth for what is being built. It replaces Slack threads, live walkthroughs, and guesswork. Write it for an engineer who joins the project the day implementation starts and has no prior context.
## Document Structure
Every handoff doc contains these sections in order:
1. Overview: what the feature does and why it exists (2-4 sentences max).
2. Design file link: direct link to the specific page or frame, not the project root.
3. Component inventory: list of every new or modified component.
4. Design tokens used: all color, spacing, typography, and radius tokens referenced.
5. Interaction states: every state for every interactive element.
6. Edge cases and constraints: what can go wrong and what the design does about it.
7. Out of scope: explicit list of what is NOT being built in this iteration.
8. Open questions: unresolved decisions that engineering may need to flag or unblock.
## Component Inventory
For each component, document:
- Name (must match the design system component name exactly, or note if it is new).… load the full skill through Skill MeClick to play with sound.