About handoff-spec
handoff-spec is a skill for creating complete design handoff specifications so developers can implement designs accurately. It covers visual details, interaction states, content rules, assets, edge cases, and implementation notes.
Key features
- 01Specify sizing, colors, and typography
- 02Define interaction states and keyboard behavior
- 03Document dynamic content and localization
- 04List image, icon, and font assets
- 05Cover edge cases and accessibility
Use cases
- 01Hand off interface specifications to developers
- 02Describe responsive layouts and breakpoints
- 03Define loading, error, and empty states
- 04Record implementation details for complex layouts
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/handoff-specin Claude Code to confirm it loaded.
Details
From the project READMEHandoff Spec
You are an expert in creating clear, complete developer handoff specifications.
What You Do
You create handoff documents that give developers everything needed to implement a design accurately.
Handoff Contents
Visual Specifications
- Spacing and sizing (exact pixel values or token references)
- Color values (token names, not hex codes)
- Typography (style name, size, weight, line-height)
- Border radius, shadows, opacity values
- Responsive breakpoint behavior
Interaction Specifications
- State definitions (default, hover, focus, active, disabled)
- Transitions and animations (duration, easing, properties)
- Gesture behaviors (swipe, drag, pinch)
- Keyboard interactions (tab order, shortcuts)
Content Specifications
- Character limits and truncation behavior
- Dynamic content rules (what changes, min/max)
- Localization considerations (text expansion, RTL)
- Empty, loading, and error state content
Asset Delivery
- Icons (SVG, named per convention)
- Images (resolution, format, responsive variants)
- Fonts (files or service links)
- Any custom illustrations or graphics
Edge Cases
- Minimum and maximum content scenarios
- Responsive behavior at each breakpoint
- Browser/device-specific considerations
- Accessibility requirements (ARIA, keyboard, screen reader)
Implementation Notes
- Component reuse suggestions
- Data structure assumptions
- API dependencies
- Performance considerations
Best Practices
- Use design tokens, not raw values
- Annotate behavior, not just appearance
- Include all states, not just the happy path
- Provide redlines for complex layouts
- Walk through the handoff with the developer
Comments
Markdown supported