Can it help with accessibility compliance?

Yes, it specifically includes sections for accessibility requirements, such as ARIA roles, screen reader considerations, and keyboard navigation rules.

Does it support design tokens?

Yes, following best practices, the skill prioritizes the use of design tokens over raw hex codes or pixel values to ensure consistency with your design system.

What does the handoff-spec skill do?

The handoff-spec skill generates detailed documentation that provides developers with everything needed to implement a design accurately, including measurements, behaviors, assets, and edge cases.

How does it handle complex interactions?

It defines state transitions (hover, focus, active), animation durations, easing properties, and keyboard interactions like tab order and shortcuts.

Design Handoff Specification

Name: Design Handoff Specification
Author: Owl-Listener

byOwl-Listener

•

699

•

디자인 도구

Generates comprehensive developer handoff documentation including visual specs, interaction states, and technical implementation notes.

This skill bridges the gap between design and development by automating the creation of detailed handoff specifications. It ensures that developers receive all necessary information—ranging from design tokens and spacing to complex interaction behaviors and accessibility requirements—minimizing implementation errors and reducing communication overhead. It is an essential tool for design engineers and frontend developers who need to translate UI designs into production-ready code with high fidelity.

주요 기능

01Identifies critical edge cases and responsive behavior across all breakpoints.

02Outlines content rules, character limits, and localization considerations.

03Provides technical implementation notes regarding component reuse and API dependencies.

04Defines comprehensive interaction states, transitions, and gesture behaviors.

05Generates detailed visual specifications using design tokens and precise spacing values.

06699 GitHub stars

사용 사례

01Creating detailed specifications for complex interactive features or dashboards.

02Documenting a new UI component library for consistent frontend implementation.

03Ensuring accessibility and responsive consistency during the design-to-code handoff process.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add owl-listener/designer-skills handoff-spec

For use in Claude.ai and ChatGPT

주요 기능

01Identifies critical edge cases and responsive behavior across all breakpoints.

02Outlines content rules, character limits, and localization considerations.

03Provides technical implementation notes regarding component reuse and API dependencies.

04Defines comprehensive interaction states, transitions, and gesture behaviors.

05Generates detailed visual specifications using design tokens and precise spacing values.

06699 GitHub stars

사용 사례

01Creating detailed specifications for complex interactive features or dashboards.

02Documenting a new UI component library for consistent frontend implementation.

03Ensuring accessibility and responsive consistency during the design-to-code handoff process.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add owl-listener/designer-skills handoff-spec

For use in Claude.ai and ChatGPT