Handoff Spec
- 944 installs
- 1.9k repo stars
- Updated June 14, 2026
- owl-listener/designer-skills
handoff-spec is a Claude Code skill that converts approved UI designs into developer-ready specifications with spacing tokens, interaction states, assets, edge cases, and accessibility notes for developers who need pixel
About
handoff-spec is a design-to-development skill from owl-listener/designer-skills that generates complete developer handoff documents after UI designs are approved. The skill structures visual specifications including spacing and sizing with exact pixel values or token references, color tokens, typography styles, border radius, shadows, and responsive breakpoint behavior. It also documents interaction specifications covering default, hover, focus, and other UI states plus edge cases and accessibility requirements. Developers reach for handoff-spec when Figma or design files lack the behavioral detail engineers need to ship interfaces without guesswork or design review loops.
- Visual specs: spacing, design tokens, typography, radius, shadows, breakpoints
- Interaction specs: hover, focus, disabled, transitions, gestures, keyboard order
- Content rules: limits, truncation, empty/loading/error copy, localization and RTL
- Asset delivery checklist: SVG icons, image variants, fonts, illustrations
- Edge cases and a11y: min/max content, per-breakpoint behavior, ARIA and screen reader notes
Handoff Spec by the numbers
- 944 all-time installs (skills.sh)
- +42 installs in the week ending Jul 29, 2026 (Skillselion tracking)
- Ranked #439 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill handoff-specAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 944 |
|---|---|
| repo stars | ★ 1.9k |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 14, 2026 |
| Repository | owl-listener/designer-skills ↗ |
How do you write developer handoff specs from UI designs?
Turn approved UI designs into developer-ready specs with spacing tokens, states, assets, edge cases, and accessibility notes so implementation matches intent.
Who is it for?
Frontend engineers and design-system leads implementing approved UI who need token-based measurements and state definitions before coding.
Skip if: Teams still iterating on visual exploration or wireframes without approved designs ready for engineering translation.
When should I use this skill?
User has approved UI designs and needs a structured developer handoff with tokens, states, assets, and accessibility coverage.
What you get
Developer handoff document with visual specs, interaction states, asset inventory, edge cases, and accessibility notes
- developer handoff specification document
Files
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
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kFAQ
What does handoff-spec include in a developer handoff?
handoff-spec covers visual specifications (spacing, color tokens, typography, radius, shadows), interaction states, responsive breakpoints, required assets, edge cases, and accessibility notes so engineers can implement without guessing design intent.
When should developers use handoff-spec?
handoff-spec fits after UI designs are approved and before frontend implementation starts, when measurements, token names, and behavioral states must be written down for accurate build-out.
Is Handoff Spec safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.