design-handoff

Name: design-handoff
Author: anthropics

2.4kinstalls2.7kforks

How to install design-handoff?

anthropics/knowledge-work-plugins/design-handoff

$npx -y skills add anthropics/knowledge-work-plugins --skill design-handoff

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# /design-handoff
2
3	> If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md).
4
5	Generate comprehensive developer handoff documentation from a design.
6
7	## Usage
8
9	```
10	/design-handoff $ARGUMENTS
11	```
12
13	Generate handoff specs for: @$1
14
15	If a Figma URL is provided, pull the design from Figma. Otherwise, work from the provided description or screenshot.
16
17	## What to Include
18
19	### Visual Specifications
20	- Exact measurements (padding, margins, widths)
21	- Design token references (colors, typography, spacing)
22	- Responsive breakpoints and behavior
23	- Component variants and states
24
25	### Interaction Specifications
26	- Click/tap behavior
27	- Hover states
28	- Transitions and animations (duration, easing)
29	- Gesture support (swipe, pinch, long-press)
30
31	### Content Specifications
32	- Character limits
33	- Truncation behavior
34	- Empty states
35	- Loading states
36	- Error states
37
38	### Edge Cases
39	- Minimum/maximum content
40	- International text (longer strings)
41	- Slow connections
42	- Missing data
43
44	### Accessibility
45	- Focus order
46	- ARIA labels and roles
47	- Keyboard interactions
48	- Screen reader announcements
49
50	## Principles
51
52	1. Don't assume — If it's not specified, the developer will guess. Specify everything.
53	2. Use tokens, not values — Reference `spacing-md` not `16px`.
54	3. Show all states — Default, hover, active, disabled, loading, error, empty.
55	4. Describe the why — "This collapses on mobile because users primarily use one-handed" helps developers make good judgment calls.
56
57	## Output
58
59	```markdown
60	## Handoff Spec: [Feature/Screen Name]
61
62	### Overview
63	[What this screen/feature does, user context]
64
65	### Layout
66	[Grid system, breakpoints, responsive behavior]
67
68	### Design Tokens Used
69	\| Token \| Value \| Usage \|
70	\|-------\|-------\|-------\|
71	\| `color-primary` \| #[hex] \| CTA buttons, links \|
72	\| `spacing-md` \| [X]px \| Between sections \|
73	\| `font-heading-lg` \| [size/weight/family] \| Page title \|
74
75	### Components
76	\| Component \| Variant \| Props \| Notes \|
77	\|-----------\|---------\|-------\|-------\|
78	\| [Component] \| [Variant] \| [Props] \| [Special behavior] \|
79
80	### States and Interactions
81	\| Element \| State \| Behavior \|
82	\|---------\|-------\|----------\|
83	\| [CTA Button] \| Hover \| [Background darken 10%] \|
84	\| [CTA Button] \| Loading \| [Spinner, disabled] \|
85	\| [Form] \| Error \| [Red border, error message below] \|
86
87	### Responsive Behavior
88	\| Breakpoint \| Changes \|
89	\|------------\|---------\|
90	\| Desktop (>1024px) \| [Default layout] \|
91	\| Tablet (768-1024px) \| [What changes] \|
92	\| Mobile (<768px) \| [What changes] \|
93
94	### Edge Cases
95	- Empty state: [What to show when no data]
96	- Long text: [Truncation rules]
97	- Loading: [Skeleton or spinner]
98	- Error: [Error state appearance]
99
100	### Animation / Motion
101	\| Element \| Trigger \| Animation \| Duration \| Easing \|
102	\|---------\|---------\|-----------\|----------\|--------\|
103	\| [Element] \| [Trigger] \| [Description] \| [ms] \| [easing] \|
104
105	### Accessibility Notes
106	- [Focus order]
107	- [ARIA labels needed]
108	- [Keyboard interactions]
109	```
110
111	## If Connectors Available
112
113	If ~~design tool is connected:
114	- Pull exact measurements, tokens, and component specs from Figma
115	- Export assets and generate a complete spec sheet
116
117	If ~~project tracker is connected:
118	- Link the handoff to the implementation ticket
119	- Create sub-tasks for each section of the spec
120
121	## Tips
122
123	1. Share the Figma link — I can pull exact measurements, tokens, and component info.
124	2. Mention edge cases — "What happens with 100 items?" helps me spec boundary conditions.
125	3. Specify the tech stack — "We use React + Tailwind" helps me give relevant implementation notes.

People who liked this also viewed

6 picks

Type

design-handoff

2.4kinstalls2.7kforks

View on GitHub

How to install design-handoff?

anthropics/knowledge-work-plugins/design-handoff

$npx -y skills add anthropics/knowledge-work-plugins --skill design-handoff

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# /design-handoff
2
3	> If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md).
4
5	Generate comprehensive developer handoff documentation from a design.
6
7	## Usage
8
9	```
10	/design-handoff $ARGUMENTS
11	```
12
13	Generate handoff specs for: @$1
14
15	If a Figma URL is provided, pull the design from Figma. Otherwise, work from the provided description or screenshot.
16
17	## What to Include
18
19	### Visual Specifications
20	- Exact measurements (padding, margins, widths)
21	- Design token references (colors, typography, spacing)
22	- Responsive breakpoints and behavior
23	- Component variants and states
24
25	### Interaction Specifications
26	- Click/tap behavior
27	- Hover states
28	- Transitions and animations (duration, easing)
29	- Gesture support (swipe, pinch, long-press)
30
31	### Content Specifications
32	- Character limits
33	- Truncation behavior
34	- Empty states
35	- Loading states
36	- Error states
37
38	### Edge Cases
39	- Minimum/maximum content
40	- International text (longer strings)
41	- Slow connections
42	- Missing data
43
44	### Accessibility
45	- Focus order
46	- ARIA labels and roles
47	- Keyboard interactions
48	- Screen reader announcements
49
50	## Principles
51
52	1. Don't assume — If it's not specified, the developer will guess. Specify everything.
53	2. Use tokens, not values — Reference `spacing-md` not `16px`.
54	3. Show all states — Default, hover, active, disabled, loading, error, empty.
55	4. Describe the why — "This collapses on mobile because users primarily use one-handed" helps developers make good judgment calls.
56
57	## Output
58
59	```markdown
60	## Handoff Spec: [Feature/Screen Name]
61
62	### Overview
63	[What this screen/feature does, user context]
64
65	### Layout
66	[Grid system, breakpoints, responsive behavior]
67
68	### Design Tokens Used
69	\| Token \| Value \| Usage \|
70	\|-------\|-------\|-------\|
71	\| `color-primary` \| #[hex] \| CTA buttons, links \|
72	\| `spacing-md` \| [X]px \| Between sections \|
73	\| `font-heading-lg` \| [size/weight/family] \| Page title \|
74
75	### Components
76	\| Component \| Variant \| Props \| Notes \|
77	\|-----------\|---------\|-------\|-------\|
78	\| [Component] \| [Variant] \| [Props] \| [Special behavior] \|
79
80	### States and Interactions
81	\| Element \| State \| Behavior \|
82	\|---------\|-------\|----------\|
83	\| [CTA Button] \| Hover \| [Background darken 10%] \|
84	\| [CTA Button] \| Loading \| [Spinner, disabled] \|
85	\| [Form] \| Error \| [Red border, error message below] \|
86
87	### Responsive Behavior
88	\| Breakpoint \| Changes \|
89	\|------------\|---------\|
90	\| Desktop (>1024px) \| [Default layout] \|
91	\| Tablet (768-1024px) \| [What changes] \|
92	\| Mobile (<768px) \| [What changes] \|
93
94	### Edge Cases
95	- Empty state: [What to show when no data]
96	- Long text: [Truncation rules]
97	- Loading: [Skeleton or spinner]
98	- Error: [Error state appearance]
99
100	### Animation / Motion
101	\| Element \| Trigger \| Animation \| Duration \| Easing \|
102	\|---------\|---------\|-----------\|----------\|--------\|
103	\| [Element] \| [Trigger] \| [Description] \| [ms] \| [easing] \|
104
105	### Accessibility Notes
106	- [Focus order]
107	- [ARIA labels needed]
108	- [Keyboard interactions]
109	```
110
111	## If Connectors Available
112
113	If ~~design tool is connected:
114	- Pull exact measurements, tokens, and component specs from Figma
115	- Export assets and generate a complete spec sheet
116
117	If ~~project tracker is connected:
118	- Link the handoff to the implementation ticket
119	- Create sub-tasks for each section of the spec
120
121	## Tips
122
123	1. Share the Figma link — I can pull exact measurements, tokens, and component info.
124	2. Mention edge cases — "What happens with 100 items?" helps me spec boundary conditions.
125	3. Specify the tech stack — "We use React + Tailwind" helps me give relevant implementation notes.

People who liked this also viewed

6 picks

Type