skills.rest
lilbom32
lilbom32COMMUNITY
Explore all skills by this author →
GitHub

design-handoff

Translate design artifacts into developer-ready handoff documentation with visual, interaction, and accessibility specs.

Updated Mar 15, 2026
Search Tags:#ui#documentation#accessibility#handoff#tokens#design-specs#design-to-dev
One-click install
npx skills add https://github.com/lilbom32/ketnoitrithuc --skill design-handoff-lilbom32
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-handoff
Source: https://github.com/lilbom32/ketnoitrithuc/tree/main/.claude/skills/design/1.1.0/skills/design-handoff
Command: npx skills add https://github.com/lilbom32/ketnoitrithuc --skill design-handoff-lilbom32

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create comprehensive, developer-ready handoff documentation that translates designs into actionable implementation guidance.

Core Features & Use Cases

  • Visual specifications with exact measurements, design tokens references, responsive breakpoints, and component states
  • Interaction specifications including click/tap behavior, hover states, transitions, and gesture support
  • Content specifications covering character limits, truncation, empty/loading/error states
  • Edge cases such as international text, slow connections, and missing data
  • Accessibility guidelines focusing on focus order, ARIA labels/roles, keyboard navigation, and screen reader announcements

Quick Start

Create a structured handoff document from your current designs to kickoff engineering implementation.

Frequently Asked Questions about design-handoff

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

FAQPage Schema
How do I create developer-ready design handoff documentation from UI components?▼

To create developer-ready design handoff documentation, translate design artifacts into structured specs covering visual measurements, interaction behaviors, content limits, edge cases, and accessibility guidelines for UI components.

What should design-to-dev handoff specs include for responsive breakpoints and state variants?▼

Design-to-dev handoff specs should include exact visual measurements, design token references, responsive breakpoints, component state variants, and interaction behaviors like transitions and hover states.

How do I document accessibility guidelines and ARIA roles for UI design handoffs?▼

Document accessibility guidelines for UI design handoffs by specifying focus order, ARIA labels and roles, keyboard navigation requirements, and screen reader announcements within the generated Markdown specifications.

Can I generate design specs covering edge cases like empty, loading, and error states?▼

Yes, you can generate design specs that cover edge cases including empty, loading, and error states, as well as content truncation, international text handling, and missing data scenarios.

Does the generated design handoff documentation support YAML frontmatter in SKILL.md?▼

Yes, the generated design handoff documentation ensures a YAML frontmatter with name and description in SKILL.md, alongside a rich Markdown body and optional resources detected in scripts, references, and assets directories.

Related Skills

Explore More Design & Creative Skills→
Prathmesh2000Prathmesh2000
1

uiux-designer

Guide UI/UX design through an interview-first workflow before producing design artifacts.

Community
Advanced
omeraltnomeraltn

agency-ui-designer

Create design tokens, component specs, and WCAG AA accessibility guidance.

Community
Advanced
RhettArkRhettArk

UI/UX Specialist

Design accessible, responsive UI components with semantic HTML and ARIA labeling.

Community
Basic
olehsvyrydovolehsvyrydov
13

ui-designer

Architect design systems and component libraries from discovery to developer handoff.

Community
Advanced