Design Handoff Doc

Demo

Click to play with sound.

---
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).… install to load the full skill