Design Handoff

What This Skill Does

This skill generates comprehensive developer handoff documentation from a design. It includes visual, interaction, and content specifications, as well as edge cases and accessibility considerations. It's useful for designers and developers who need to ensure a smooth and accurate implementation of a design.

When to Use

Preparing designs for developmentCreating detailed specifications for developersEnsuring accurate implementation of designsDocumenting design decisionsFacilitating communication between designers and developers

Key Features

Generates visual specifications with exact measurementsIncludes design token references for consistencySpecifies interaction behavior and animationsCovers content specifications and edge casesAddresses accessibility requirementsEmphasizes the importance of specifying everything

If you see unfamiliar placeholders or need to check which tools are connected, see 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

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.

Output

Handoff Spec: [Feature/Screen Name]

Overview

[What this screen/feature does, user context]

Layout

[Grid system, breakpoints, responsive behavior]

Design Tokens Used

Components

States and Interactions

Responsive Behavior

Animation / Motion

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

Share the Figma link — I can pull exact measurements, tokens, and component info. Mention edge cases — "What happens with 100 items?" helps me spec boundary conditions. Specify the tech stack — "We use React + Tailwind" helps me give relevant implementation notes./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.