PaperclipOrg
Claude Agent Skill · by Anthropics

Design Handoff

Install Design Handoff skill for Claude Code from anthropics/knowledge-work-plugins.

Install
Terminal · npx
$npx skills add https://github.com/obra/superpowers --skill brainstorming
Works with Paperclip

How Design Handoff fits into a Paperclip company.

Design Handoff drops into any Paperclip agent that handles this kind of work. Assign it to a specialist inside a pre-configured PaperclipOrg company and the skill becomes available on every heartbeat — no prompt engineering, no tool wiring.

S
SaaS FactoryPaired

Pre-configured AI company — 18 agents, 18 skills, one-time purchase.

$27$59
Explore pack
Source file
SKILL.md131 lines
Expand
---name: design-handoffdescription: 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.argument-hint: "<Figma URL or design description>"--- # /design-handoff > If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md). Generate comprehensive developer handoff documentation from a design. ## 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. ## 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 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. ## Output ```markdown## 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]``` ## 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 ## 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.