Can it handle accessibility requirements?

Absolutely. The skill generates specifications for ARIA labels, keyboard tab orders, and screen reader requirements to ensure inclusive design implementation.

What implementation details are included for developers?

Beyond visuals, it provides notes on component reuse, API dependencies, and data structure assumptions to help developers architect the solution efficiently.

How does this skill help with design systems?

It prioritizes the use of design tokens over raw hex codes and pixel values, ensuring consistency with your existing design system and brand guidelines.

Does it cover mobile and responsive design?

Yes, it includes specific sections for responsive breakpoint behaviors, touch gestures like swiping, and device-specific considerations.

Design Handoff Specification Generator

Name: Design Handoff Specification Generator
Author: sethdford

bysethdford

•

设计工具

Generates comprehensive developer handoff documents featuring precise measurements, interaction states, and design tokens to bridge the gap between design and implementation.

The handoff-spec skill streamlines the DesignOps workflow by automating the creation of detailed implementation guides for developers. It translates design intent into actionable specifications, covering everything from design tokens and responsive breakpoints to keyboard interactions and accessibility requirements. By providing structured notes on component reuse and data structure assumptions, this skill minimizes back-and-forth communication, reduces implementation errors, and ensures that the final product remains pixel-perfect across all devices and browsers.

主要功能

01Responsive breakpoint and layout behavior specs

02Detailed edge case and error state definitions

03Comprehensive interaction state and gesture mapping

04Automated design token and spacing documentation

059 GitHub stars

06Asset delivery and accessibility requirement outlines

使用场景

01Documenting complex interactive components for a shared design system

02Preparing a Figma or Sketch design for engineering implementation

03Standardizing handoff quality across a multi-disciplinary product team

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sethdford/claude-skills handoff-spec

For use in Claude.ai and ChatGPT

主要功能

01Responsive breakpoint and layout behavior specs

02Detailed edge case and error state definitions

03Comprehensive interaction state and gesture mapping

04Automated design token and spacing documentation

059 GitHub stars

06Asset delivery and accessibility requirement outlines

使用场景

01Documenting complex interactive components for a shared design system

02Preparing a Figma or Sketch design for engineering implementation

03Standardizing handoff quality across a multi-disciplinary product team

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sethdford/claude-skills handoff-spec

For use in Claude.ai and ChatGPT