How do I trigger the design handoff skill?

You can trigger the skill by using phrases like 'handoff to engineering', 'developer specs', or 'implementation notes' when you need to translate a design into technical documentation.

Why is this better than just looking at a design tool?

This skill articulates the 'why' behind design choices and explicitly defines edge cases—like truncation and empty states—that are often missed in visual mock-ups.

What kind of visual specifications does it provide?

The skill provides exact measurements for padding and margins, references design tokens for typography and color, and defines responsive behaviors and component variants.

How does it handle interaction details?

It specifies click/tap behaviors, hover states, transition durations, easing functions, and gesture support like swipes or long-presses.

Does this skill include accessibility guidelines?

Yes, it generates specific documentation for focus order, ARIA labels, roles, keyboard interactions, and screen reader announcements.

Design Handoff Documentation

Name: Design Handoff Documentation
Author: lilbom32

bylilbom32

0•

デザインツール

Generates comprehensive, developer-ready specifications and implementation notes from design concepts.

The Design Handoff skill streamlines the transition from UI/UX design to development by creating detailed, technical documentation. It ensures that every aspect of an interface—including design tokens, responsive behaviors, interaction states, and accessibility requirements—is clearly defined, reducing ambiguity for engineering teams. By providing structured guidance on edge cases, loading states, and ARIA roles, this skill helps developers implement production-grade interfaces that align perfectly with the original design vision.

主な機能

01Edge case, error, and loading state definitions

02Accessibility, focus order, and ARIA role mapping

03Detailed interaction, hover, and animation specs

04Design token and measurement mapping

050 GitHub stars

06Responsive breakpoint and layout behavior documentation

ユースケース

01Documenting complex accessibility and keyboard interaction requirements

02Translating visual mock-ups into structured developer notes

03Generating implementation specs for a new UI component

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lilbom32/ketnoitrithuc design-handoff

For use in Claude.ai and ChatGPT

主な機能

01Edge case, error, and loading state definitions

02Accessibility, focus order, and ARIA role mapping

03Detailed interaction, hover, and animation specs

04Design token and measurement mapping

050 GitHub stars

06Responsive breakpoint and layout behavior documentation

ユースケース

01Documenting complex accessibility and keyboard interaction requirements

02Translating visual mock-ups into structured developer notes

03Generating implementation specs for a new UI component

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lilbom32/ketnoitrithuc design-handoff

For use in Claude.ai and ChatGPT