Design handoff notes

---
name: design-handoff-notes
description: "Writes developer handoff notes for a design: states, spacing, behaviour, responsive rules and accessibility. Use when passing designs to engineers."
---

# Design handoff notes

Handoff notes remove guessing.

## How to work

1. List the components and their states.
2. Note spacing, sizes and tokens used.
3. Describe behaviour: hover, focus, animation, errors.
4. Describe responsive changes.
5. List accessibility requirements.

## Rules

- Use token names, not raw values, where they exist.
- Mark anything not designed yet.

## Output

Notes per component or screen.

How to use it

1. Download the skill.
2. Put its folder (with SKILL.md inside) in .claude/skills/design-handoff-notes/ for just this project, or in ~/.claude/skills/ for every project.
3. Restart your tool and ask for what the skill does. It loads on its own when it fits.

Try it

Write handoff notes for the new pricing table.

Copy prompt