---
name: Handoff Spec
slug: handoff-spec
category: Frontend
description: Handoff Spec writes implementation handoffs with measurements, behaviors, assets, states, and edge cases so developers can build a design accurately.
github: "https://github.com/Owl-Listener/designer-skills/tree/main/design-ops/skills/handoff-spec"
language: Markdown
stars: 2098
forks: 335
install: "npx degit https://github.com/Owl-Listener/designer-skills/tree/main/design-ops/skills/handoff-spec ~/.claude/skills/handoff-spec"
installs_to: ~/.claude/skills/handoff-spec
source_path: design-ops/skills/handoff-spec/SKILL.md
collection_size: 25
category_size: 567
collection_url: "https://dirskills.com/collections/Owl-Listener/designer-skills"
added: 2026-08-18T06:58:39.846Z
last_synced: 2026-08-18T06:58:39.846Z
canonical_url: "https://dirskills.com/skills/handoff-spec"
---

# Handoff Spec

Handoff Spec writes implementation handoffs with measurements, behaviors, assets, states, and edge cases so developers can build a design accurately.

**Install:**

```bash
npx degit https://github.com/Owl-Listener/designer-skills/tree/main/design-ops/skills/handoff-spec ~/.claude/skills/handoff-spec
```

## README

# 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