Skill Tracer
Skills › Knowledge Work Plugins › design-handoff

design-handoff

skill · 131 lines · Apache-2.0 · design/skills/design-handoff/SKILL.md

The facts

Its description

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.

The description the agent reads to decide when to use it.

From its settingsline 3

When it starts

A person has a design that is finished and ready to build — a Figma link, screenshot, or written description — and wants it turned into a developer-ready spec sheet covering layout, tokens, states, breakpoints, edge cases, and motion.

Things a person might say (the model's guesses)

  • “Here's the Figma link for the new checkout screen — can you write the handoff spec for engineering?”
  • “The settings page design is approved, I need a spec sheet the devs can build from.”
  • “Turn this screenshot of our empty-state design into a handoff doc with all the states and breakpoints.”

A model's summary of when it is used.

A model's reading

What it takes when started

<Figma URL or design description>

What to type after its name when you start it.

From its settingsline 4

Licence

Apache-2.0, from LICENSE

The terms its author shares it under, which let it be shown here.

From the repositorylicence text

The text

Open on GitHub

Most marks come from matching words in the file, so treat them as pointers.

1---
2name: design-handoff
3description: 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.
4argument-hint: "<Figma URL or design description>"
5---
6
7# /design-handoff
8
9> If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md).
11Generate comprehensive developer handoff documentation from a design.

/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.

Raw lines 1 to 12
13## Usage
15```
16/design-handoff $ARGUMENTS
17```
19Generate handoff specs for: @$1
21If a Figma URL is provided, pull the design from Figma. Otherwise, work from the provided description or screenshot.

Usage

/design-handoff $ARGUMENTS

Generate handoff specs for: @$1

If a Figma URL is provided, pull the design from Figma. Otherwise, work from the provided description or screenshot.

Raw lines 13 to 22
23## What to Include

What to Include

Raw lines 23 to 24
25### Visual Specifications
26- Exact measurements (padding, margins, widths)
27- Design token references (colors, typography, spacing)
28- Responsive breakpoints and behavior
29- Component variants and states

Visual Specifications

  • Exact measurements (padding, margins, widths)
  • Design token references (colors, typography, spacing)
  • Responsive breakpoints and behavior
  • Component variants and states
Raw lines 25 to 30
31### Interaction Specifications
32- Click/tap behavior
33- Hover states
34- Transitions and animations (duration, easing)
35- Gesture support (swipe, pinch, long-press)

Interaction Specifications

  • Click/tap behavior
  • Hover states
  • Transitions and animations (duration, easing)
  • Gesture support (swipe, pinch, long-press)
Raw lines 31 to 36
37### Content Specifications
38- Character limits
39- Truncation behavior
40- Empty states
41- Loading states
42- Error states

Content Specifications

  • Character limits
  • Truncation behavior
  • Empty states
  • Loading states
  • Error states
Raw lines 37 to 43
44### Edge Cases
45- Minimum/maximum content
46- International text (longer strings)
47- Slow connections
48- Missing data

Edge Cases

  • Minimum/maximum content
  • International text (longer strings)
  • Slow connections
  • Missing data
Raw lines 44 to 49
50### Accessibility
51- Focus order
52- ARIA labels and roles
53- Keyboard interactions
54- Screen reader announcements

Accessibility

  • Focus order
  • ARIA labels and roles
  • Keyboard interactions
  • Screen reader announcements
Raw lines 50 to 55
56## Principles
581. **Don't assume** — If it's not specified, the developer will guess. Specify everything.
592. **Use tokens, not values** — Reference `spacing-md` not `16px`.
603. **Show all states** — Default, hover, active, disabled, loading, error, empty.
614. **Describe the why** — "This collapses on mobile because users primarily use one-handed" helps developers make good judgment calls.

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.
Raw lines 56 to 62
63## Output
65```markdown
66## Handoff Spec: [Feature/Screen Name]
68### Overview
69[What this screen/feature does, user context]
71### Layout
72[Grid system, breakpoints, responsive behavior]
74### Design Tokens Used
75| Token | Value | Usage |
76|-------|-------|-------|
77| `color-primary` | #[hex] | CTA buttons, links |
78| `spacing-md` | [X]px | Between sections |
79| `font-heading-lg` | [size/weight/family] | Page title |
81### Components
82| Component | Variant | Props | Notes |
83|-----------|---------|-------|-------|
84| [Component] | [Variant] | [Props] | [Special behavior] |
86### States and Interactions
87| Element | State | Behavior |
88|---------|-------|----------|
89| [CTA Button] | Hover | [Background darken 10%] |
90| [CTA Button] | Loading | [Spinner, disabled] |
91| [Form] | Error | [Red border, error message below] |
93### Responsive Behavior
94| Breakpoint | Changes |
95|------------|---------|
96| Desktop (>1024px) | [Default layout] |
97| Tablet (768-1024px) | [What changes] |
98| Mobile (<768px) | [What changes] |
100### Edge Cases
101- **Empty state**: [What to show when no data]
102- **Long text**: [Truncation rules]
103- **Loading**: [Skeleton or spinner]
104- **Error**: [Error state appearance]
106### Animation / Motion
107| Element | Trigger | Animation | Duration | Easing |
108|---------|---------|-----------|----------|--------|
109| [Element] | [Trigger] | [Description] | [ms] | [easing] |
111### Accessibility Notes
112- [Focus order]
113- [ARIA labels needed]
114- [Keyboard interactions]
115```

Output

## Handoff Spec: [Feature/Screen Name]

### Overview
[What this screen/feature does, user context]

### Layout
[Grid system, breakpoints, responsive behavior]

### Design Tokens Used
| Token | Value | Usage |
|-------|-------|-------|
| `color-primary` | #[hex] | CTA buttons, links |
| `spacing-md` | [X]px | Between sections |
| `font-heading-lg` | [size/weight/family] | Page title |

### Components
| Component | Variant | Props | Notes |
|-----------|---------|-------|-------|
| [Component] | [Variant] | [Props] | [Special behavior] |

### States and Interactions
| Element | State | Behavior |
|---------|-------|----------|
| [CTA Button] | Hover | [Background darken 10%] |
| [CTA Button] | Loading | [Spinner, disabled] |
| [Form] | Error | [Red border, error message below] |

### Responsive Behavior
| Breakpoint | Changes |
|------------|---------|
| Desktop (>1024px) | [Default layout] |
| Tablet (768-1024px) | [What changes] |
| Mobile (<768px) | [What changes] |

### Edge Cases
- **Empty state**: [What to show when no data]
- **Long text**: [Truncation rules]
- **Loading**: [Skeleton or spinner]
- **Error**: [Error state appearance]

### Animation / Motion
| Element | Trigger | Animation | Duration | Easing |
|---------|---------|-----------|----------|--------|
| [Element] | [Trigger] | [Description] | [ms] | [easing] |

### Accessibility Notes
- [Focus order]
- [ARIA labels needed]
- [Keyboard interactions]
Raw lines 63 to 116
117## If Connectors Available
119If **~~design tool** is connected:
120- Pull exact measurements, tokens, and component specs from Figma
121- Export assets and generate a complete spec sheet
123If **~~project tracker** is connected:
124- Link the handoff to the implementation ticket
125- Create sub-tasks for each section of the spec

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
Raw lines 117 to 126
Uses an outside tool ~~design :119
Uses an outside tool ~~project :123
127## Tips
1291. **Share the Figma link** — I can pull exact measurements, tokens, and component info.
1302. **Mention edge cases** — "What happens with 100 items?" helps me spec boundary conditions.
1313. **Specify the tech stack** — "We use React + Tailwind" helps me give relevant implementation notes.

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.
Raw lines 127 to 131

From anthropics/knowledge-work-plugins at 2574e29, 2026-10-27. Skills read by DeepSeek V4.1 Flash on 2026-11-04. Summary and techniques by Claude Opus 5.5 on 2026-11-06.