design-handoff

Original：🇺🇸 English

Translated

Create comprehensive developer handoff documentation from designs. Trigger with "handoff to engineering", "developer specs", "implementation notes", "design specs for developers", or when a design needs to be translated into detailed implementation guidance.

3installs

Sourceanthropics/knowledge-work-plugins

Added on2026-02-25

NPX Install

npx skill4agent add anthropics/knowledge-work-plugins design-handoff

SKILL.md Content

View Translation Comparison →

Design Handoff

Create clear, complete handoff documentation so developers can implement designs accurately.

What to Include

Visual Specifications

Exact measurements (padding, margins, widths)
Design token references (colors, typography, spacing)
Responsive breakpoints and behavior
Component variants and states

Interaction Specifications

Click/tap behavior
Hover states
Transitions and animations (duration, easing)
Gesture support (swipe, pinch, long-press)

Content Specifications

Character limits
Truncation behavior
Empty states
Loading states
Error states

Edge Cases

Minimum/maximum content
International text (longer strings)
Slow connections
Missing data

Accessibility

Focus order
ARIA labels and roles
Keyboard interactions
Screen reader announcements

Principles

Don't assume — If it's not specified, the developer will guess. Specify everything.
Use tokens, not values — Reference
```
spacing-md
```
not
```
16px
```
.
Show all states — Default, hover, active, disabled, loading, error, empty.
Describe the why — "This collapses on mobile because users primarily use one-handed" helps developers make good judgment calls.