How to install handoff-spec
npx skills add https://github.com/owl-listener/designer-skills --skill handoff-specFull instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
name: handoff-spec description: Create developer handoff specifications with measurements, behaviors, assets, and edge cases.
Handoff 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
Related skills
More from owl-listener/designer-skills and the wider catalog.
heuristic-evaluation
Conduct expert heuristic evaluations using Nielsen's heuristics and domain-specific criteria.
icon-system
Create an icon system specification covering grid, sizing, naming, categories, and implementation guidance.
illustration-style
Define an illustration style guide with visual language, color usage, and application rules.
interview-script
Create a structured user interview script with warm-up, core exploration, and wrap-up sections. Use when preparing for user research interviews to ensure consistent, insightful conversations.
jobs-to-be-done
Map user Jobs-to-Be-Done with functional, emotional, and social dimensions plus outcome expectations. Use when reframing product decisions around user motivations rather than features.
journey-map
Create an end-to-end user journey map with stages, touchpoints, emotions, pain points, and opportunity areas. Use when mapping the full user experience for a product, feature, or service.