Skip to main content
affpapa.org
RU EN
skill CX Codex

handoff-spec — Claude Code skill: what it does, how to install

Generates developer handoff specifications covering measurements, interaction states, responsive breakpoints, and edge cases before engineering starts.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add Owl-Listener/designer-skills --skill handoff-spec -a claude-code
Open on GitHub

What handoff-spec does

The skill structures handoff documents so developers get clear implementation details. It replaces raw hex codes with design tokens. Visual rules cover exact measurements, typography styles, shadows, and responsive breakpoint behavior.

It details interaction flows across hover, focus, active, and disabled states. The generated spec includes keyboard tab order, gesture behaviors, text truncation, and ARIA accessibility attributes. Empty, loading, and error states are documented alongside asset requirements for SVGs and responsive images.

For reusable design system elements, the author recommends component-spec instead. Use handoff-spec when engineers pick up feature work, and turn to design-qa-checklist later to verify the implemented build.

What it helps with

  • document visual specs using design tokens instead of raw values
  • specify interaction states, tab order, and gesture behaviors
  • define responsive breakpoints and text truncation edge cases
  • outline asset formats and ARIA requirements for developers

Example prompts for the agent

  • Create a handoff-spec for the user profile card with all states and token references
  • Write an implementation handoff for the checkout screen including empty and error states
  • Draft handoff specifications for the navigation drawer covering gestures and responsive breakpoints

How to install handoff-spec

1Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill handoff-spec -a claude-code

2Manually: put the files in place

~/.claude/skills/handoff-spec/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/handoff-spec/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about handoff-spec

How do I install handoff-spec in Claude Code?

Run npx skills add Owl-Listener/designer-skills --skill handoff-spec -a claude-code in your terminal.

What does handoff-spec do?

It creates structured developer handoff documentation before engineering starts. It details visual tokens, responsive rules, interaction states, asset delivery, and accessibility requirements.

When should I use handoff-spec versus component-spec?

Use handoff-spec when engineers start implementing a specific screen or flow. For reusable design system components, use component-spec, and verify the final coded result with design-qa-checklist.

Source text

SKILL.md · MIT 
---
name: handoff-spec
description: 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).
---
# 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

© Owl-Listener · MIT · Owl-Listener/designer-skills

Similar skills

Everything for Design →
uizze-ui UIZZE Guides the agent through layout fixes, typography adjustments, and UI state handling. Helpful when improving component hierarchy using existing project tokens. CX Codex +1 144,000installs build-design jakubkrehel Builds UI code from a Figma file or image mockup. It reuses existing project tokens and components instead of hardcoding values. CX Codex +1 3,600installs image-to-code plugin87 Reconstructs UI mockups and screenshots into token-driven accessible code with automated WCAG AA contrast validation. CX Codex +1 719installs redesign educlopez Redesigns web apps and sites without breaking existing SEO, brand colors, or conversion forms. Audits the surface before touching any code. CX Codex +1 463installs create-canvas ibelick This skill builds a freeform canvas inside your project so UI variants sit side by side, move around, and get compared without a page reload. CX Codex +1 381installs notion-spec-to-implementation makenotion Turns technical specifications in Notion into structured implementation plans and tracker tasks. Useful when breaking product requirements down into development milestones. CX Codex +1 358installs

From the same set111

affinity-diagram This skill groups observations and quotes from interviews into themed clusters and writes insight statements. Useful when you have many sources to synthesise. CX Codex +1 2,100installs documentation-template Generates reusable documentation scaffolds for design system components, patterns, and foundations. Use it when setting a shared documentation standard across your team. CX Codex +1 2,100installs naming-convention Sets one naming scheme for components, tokens and layers so names stop drifting between files. CX Codex +1 2,100installs empathy-map Builds an empathy map for one user or segment across four quadrants, so the team shares the same picture of the user. CX Codex +1 2,100installs experience-map The skill maps every touchpoint, channel and relationship across a service. Useful when the experience spans more than one product. CX Codex +1 2,100installs jobs-to-be-done A Claude Code skill that runs a Jobs-to-Be-Done pass: splits a task into functional, emotional and social parts, then returns a map with design implications. CX Codex +1 2,100installs user-persona This skill builds 2-4 research-grounded personas from interview transcripts, surveys, or analytics. It helps teams align design decisions with observed user behavior. CX Codex +1 2,100installs gesture-patterns Designs touch and pointer gestures such as swipes, dragging and long presses. Use it when an interface relies on gestural input. CX Codex +1 2,100installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor