Owl-ListenerInstall Handoff Spec
Pick your agent. Every command is ready to paste.
npx skills add Owl-Listener/designer-skills --skill handoff-specThe open skills CLI detects your agents (Claude Code, Cursor, Codex and 70+ more) and installs to the right folder. Add -g to install globally.
01
Install it
Run the command above, or upload the folder in Claude.
02
Ask naturally
Describe the task. Your agent loads handoff-spec when the request matches its description.
03
Name it if needed
If it does not trigger, say “use the handoff-spec skill”. In Codex, type $handoff-spec.
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
Tips for Handoff Spec
- • Start a fresh session after installing so your agent picks up the new skill.
- • It is part of a pack with 30 skills. Install only the ones you need with --skill to keep triggers precise.
- • If two skills overlap, mention the one you want by name.
Questions about Handoff Spec
What does the Handoff Spec skill do?
Write the implementation handoff — measurements, behaviours, assets, states, and edge cases. Use when engineering picks up the work. For verifying the result afterwards use `design-qa-checklist`; for reusable library components use `component-spec` (design-systems).
How do I install Handoff Spec?
Run "npx skills add Owl-Listener/designer-skills --skill handoff-spec" in your project. The skills CLI installs it for Claude Code, Cursor, Codex and 70+ other agents. In Claude on the web, upload the skill folder as a ZIP under Customize > Skills.
Does Handoff Spec work in Cursor and Codex?
Yes. Handoff Spec uses the open SKILL.md format, so it works in Claude Code, Claude, Cursor, OpenAI Codex, Gemini CLI, GitHub Copilot and other agents that support agent skills.
Is Handoff Spec free?
Handoff Spec is open source on GitHub under the MIT license. It is free to install; check the license before commercial use.
Who made Handoff Spec?
Handoff Spec is published by Owl-Listener in the Owl-Listener/designer-skills repository, together with 29 other skills.
