skills.rest
kiryteo
kiryteoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-handoff

Generate developer handoff documentation from design assets with visual specs and accessibility notes.

1|Updated Mar 9, 2026
Search Tags:#documentation#accessibility#handoff#ui-components#design-spec#design-to-dev
One-click install
npx skills add https://github.com/kiryteo/opencode-setup --skill design-handoff-kiryteo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-handoff
Source: https://github.com/kiryteo/opencode-setup/tree/main/skills/design-handoff
Command: npx skills add https://github.com/kiryteo/opencode-setup --skill design-handoff-kiryteo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translating design concepts into precise, developer-ready handoff documentation to accelerate implementation.

Core Features & Use Cases

  • Generates clear handoff artifacts from design files and specs.
  • Aligns with engineering workflows by including specs, tokens, states, and edge cases.
  • Use Case: A design team hands off a new component to engineers with all measurements, states, and accessibility notes.

Quick Start

Create developer handoff docs from the latest design for the signup component.

Frequently Asked Questions about design-handoff

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate developer handoff documentation from design assets?▼

You can generate developer handoff documentation by extracting visual specs, interaction details, accessibility notes, and edge cases from design assets to create actionable implementation guides for engineering workflows.

What is a design to dev handoff document?▼

A design to dev handoff document translates design concepts into precise, developer-ready specs by detailing component measurements, states, tokens, and accessibility notes to accelerate engineering implementation.

How do I document UI components and design tokens for engineering workflows?▼

Documenting UI components and design tokens involves specifying measurements, visual specs, interaction states, and edge cases so engineers can implement the design system elements accurately without ambiguity.

How do I include accessibility notes in a design spec for handoff?▼

Including accessibility notes in a design spec requires extracting specific interaction details and edge cases from the design assets to ensure the final UI components meet accessibility requirements during implementation.

Can I use this to extract visual specs and states for a design system?▼

Yes, you can extract visual specs, interaction details, and various component states from design system assets to produce comprehensive handoff artifacts that align directly with engineering workflows.

What is the best way to handle edge cases during design handoff?▼

The best way to handle edge cases during design handoff is to explicitly extract and document them alongside visual specs and interaction details, ensuring engineers anticipate and implement all possible component states.

Related Skills

Explore More Design & Creative Skills→
modu-aimodu-ai
4

moai-workflow-design-import

Extract design tokens, components, and assets from Claude handoff bundles.

Official
Advanced
samdaesamdae
1

Reverse

Generate spec and architecture markdown files from backend and frontend code.

Community
Advanced
andebet07-ossandebet07-oss

design-handoff

Generate developer handoff documentation from design specifications.

Community
Advanced
redongreenredongreen
236

create-api

Generate API overview specifications for Figma components using MCP tools.

Community
Advanced