handoff-spec

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).

2,076
installs: 0 up / 0 down, score 0.00
votes: 3,024
repo stars
Updated: 2 months ago
In the catalog since: 1 Oct 2026
From: owl-listener/designer-skills

Get it through your agent npx skills add owl-listener/designer-skills@handoff-spec

Skill instructions

Rendered from the published SKILL.md, 43 lines.

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

Get it through your agent

Call the Graph-of-Skills MCP server's retrieve_skill_bundle tool and it returns this skill's text inside your budget.

{
  "tool": "retrieve_skill_bundle",
  "arguments": {
    "query": "handoff-spec"
  }
}

New to this? Set up Graph-of-Skills or get a free key. The text on this page comes from its authors: how skills are sourced and what we check. If none fits your task, your agent can write a skill for your own library. To keep a skill from your own library on a machine, see how to install one of your skills.

Share on X Share on LinkedIn Share on Bluesky Share on Hacker News

Share on Reddit

Source

Source repository owl-listener/designer-skills
Listing on skills.sh

From owl-listener/designer-skills via skills.sh

Related skills

design-handoff
Generate developer handoff specs from a design. Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, and animation details.
3,540 installs
specify
Bridges design and engineering by producing detailed specs, organized handoff packages, asset inventories, and cross-functional documentation. Part of the Intent design strategy system. Trigger when: writing design specs, preparing engineering handoffs, documenting for development, writing the spec material behind a design review (the deck itself goes to /present), writing test plans, building copy matrices, addressing edge cases, packaging designs "for engineering," or saying "write the spec," "prepare the handoff," or "document this."
2,661 installs
writing-specs-designs
Help users write effective specs and design documents. Use when someone is creating technical specs, feature specs, design docs, or trying to communicate product requirements to engineering and design teams.
1,760 installs
writing-design-docs
Use when writing a proposal, RFC, design document, spec, or migration plan - anything that argues for a change, records a design, or asks readers for input on one. Encodes the proposal skeleton, the Why & What decision box, and the completeness checks. Use whenever a change needs arguing or scoping in writing, even if the user just says "write up the approach".
18,043 installs
session-handoff
Creates comprehensive handoff documents for seamless AI agent session transfers. Triggered when: (1) user requests handoff/memory/context save, (2) context window approaches capacity, (3) major task milestone completed, (4) work session ending, (5) user says 'save state', 'create handoff', 'I need to pause', 'context is getting full', (6) resuming work with 'load handoff', 'resume from', 'continue where we left off'. Proactively suggests handoffs after substantial work (multiple file edits, complex debugging, architecture decisions). Solves long-running agent context exhaustion by enabling fresh agents to continue with zero ambiguity.
4,196 installs

More from owl-listener/designer-skills

presentation-deck
Structure a design presentation for a specific audience and decision. Use when presenting internally. For a portfolio narrative use `case-study`; for the written argument use `design-rationale`.
3,072 installs
typography-scale
Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use `readable-measure`; for judging type on an existing screen use `critique-typography` (visual-critique).
2,560 installs
visual-hierarchy
Establish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use `critique-visual-hierarchy` (visual-critique).
2,506 installs
illustration-style
Define an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use `icon-system` (design-systems).
2,505 installs
color-system
Build a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use `dark-mode-design`; for chart palettes use `data-visualization`; for multi-brand token architecture use `theming-system` (design-systems).
2,466 installs

Content is provided as published by its creators; you are responsible for how you use it.

To request removal, use the contact form.