What is the handoff-spec skill?
The handoff-spec skill is a SKILL.md in the design-ops plugin of Owl-Listener's designer-skills repository. It has an AI coding agent write a handoff with visual, interaction, content, asset and edge case specifications plus implementation notes, for the moment engineering picks up the work.
The handoff-spec skill sits in the design-ops plugin of Owl-Listener's designer-skills pack. It casts the agent as an expert in clear, complete developer handoff specifications that give developers everything needed to implement a design accurately.
Its description sets the trigger as engineering picking up the work. For verifying the result afterwards it names design-qa-checklist, and for reusable library components it points to component-spec.
The six handoff sections
- Visual specifications: spacing and sizing as pixel values or token references, color token names, typography styles, radius, shadows, opacity and breakpoint behavior.
- Interaction specifications: states, transitions with duration, easing and properties, gesture behaviors and keyboard interactions.
- Content specifications: character limits, truncation, dynamic content rules, localization such as text expansion and RTL, and empty, loading and error content.
- Asset delivery: SVG icons named per convention, images with resolution, format and responsive variants, fonts and custom illustrations.
- Edge cases: minimum and maximum content, each breakpoint, browser and device differences and accessibility requirements.
- Implementation notes: component reuse suggestions, data structure assumptions, API dependencies and performance considerations.
Best practices
Use design tokens, not raw values. Annotate behavior as well as appearance, include every state including the unhappy paths, provide redlines for complex layouts and walk through the handoff with the developer.
Who the handoff-spec skill is for
Best for
- Designers handing a finished design to engineers who need exact values, states and assets.
- Teams that reference named tokens instead of hex codes in their specs.
- Anyone who wants edge cases and localization written down before development starts.
Not for
- Verifying a finished build. The description names design-qa-checklist for that.
- Specifying one reusable library component. Use the component-spec skill for that, or the design handoff skill, which takes a Figma URL, a screenshot or a description.
How to install Handoff Spec Skill: Six Sections for Developer Handoff
/plugin marketplace add Owl-Listener/designer-skillsAdd the marketplace
Enter the command above in your AI coding agent. It points the agent at the repository, and no plugin installs at this stage.
Install the plugin
Run
/plugin install design-ops@designer-skills. design-ops is the plugin that holds this skill, and the Discover tab under/pluginoffers the same choice.Gemini CLI route
Each plugin is also a Gemini CLI extension. Clone the repository to a temporary folder, create
.gemini/extensionsin your project root, and copy the repository's.gemini/extensionscontents into it.Share the design
Give the agent the screen or component, its tokens and its states. It writes the six sections and flags edge cases.
Check that it loaded
Ask for a handoff spec for one screen. Expect visual, interaction, content, asset, edge case and implementation note sections.
Key features
- Visual specificationsSpacing and sizing as exact pixel values or token references, color token names rather than hex codes, typography details, radius, shadows, opacity and breakpoint behavior.
- Interaction specificationsState definitions, transitions and animations with duration, easing and properties, gesture behaviors and keyboard interactions.
- Content specificationsCharacter limits and truncation, dynamic content rules, localization such as text expansion and RTL, and empty, loading and error state content.
- Asset deliverySVG icons named per convention, images with resolution, format and responsive variants, fonts as files or service links, and custom illustrations.
- Edge casesMinimum and maximum content scenarios, behavior at each breakpoint, browser and device considerations and accessibility requirements such as ARIA, keyboard and screen reader.
- Implementation notesComponent reuse suggestions, data structure assumptions, API dependencies and performance considerations.
- Tokens over raw valuesThe best practices say to use design tokens, not raw values.
- Behavior annotatedAnnotate behavior as well as appearance, and include all states, including the unhappy paths.
- Redlines and walkthroughProvide redlines for complex layouts and walk through the handoff with the developer.
Frequently asked questions
What is the handoff-spec skill?
It is a SKILL.md in the design-ops plugin of Owl-Listener's designer-skills repository. It has an AI coding agent write an implementation handoff with measurements, behaviors, assets, states and edge cases, so developers have what they need to build the design accurately.
How do I install handoff-spec?
Run /plugin marketplace add Owl-Listener/designer-skills, then /plugin install design-ops@designer-skills. The skill is part of the design-ops plugin. The Discover tab under /plugin offers the same choice, and Gemini CLI users can copy the repository's extensions folder. The design-ops plugin also ships /design-ops:handoff for the full workflow.
What does a handoff spec from this skill contain?
Six sections: visual specifications, interaction specifications, content specifications, asset delivery, edge cases and implementation notes. They cover pixel values or tokens, states and transitions, truncation and localization, SVG and image delivery, minimum and maximum content, and API dependencies. The best practices add redlines for complex layouts.
Should a handoff spec use tokens or hex codes?
Tokens. The skill asks for color token names, not hex codes, and spacing as exact pixel values or token references. Its best practices repeat the point: use design tokens, not raw values. Typography goes in as style name, size, weight and line-height.
When should I use handoff-spec?
Use it when engineering picks up the work. The description separates it from design-qa-checklist, which verifies the result afterwards, and from component-spec, which is for reusable library components. The handoff-spec skill produces the document engineers build from. The design-ops plugin also ships /design-ops:handoff for the full workflow.
What license does handoff-spec use?
It is MIT licensed, as is the whole Owl-Listener/designer-skills repository. The pack holds 273 skills and 76 commands across 33 plugins, and handoff-spec is one of the skills in the design-ops plugin. The nine design practice plugins, design-ops among them, ship from this repository.
Does handoff-spec cover localization and edge cases?
Yes. Content specifications include localization considerations such as text expansion and RTL, plus character limits and truncation. The edge case section covers minimum and maximum content, behavior at each breakpoint, browser and device differences, and accessibility requirements including ARIA, keyboard and screen reader behavior.