design-handoff

Generate developer handoff documentation from design sources.

2|1|Updated May 17, 2026

Search Tags:#accessibility #figma #interaction states #responsive layout #design handoff #ui spec

Ready to run

npx skills add https://github.com/rakibulism/agent-skills-os --skill design-handoff-rakibulism

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-handoff
Source: https://github.com/rakibulism/agent-skills-os/tree/main/skills/design-design-handoff
Command: npx skills add https://github.com/rakibulism/agent-skills-os --skill design-handoff-rakibulism

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes ambiguity when a design is ready for implementation by turning visual concepts into a precise developer handoff that engineers can build from without guessing.

Core Features & Use Cases

Layout Specification: Documents spacing, measurements, responsive behavior, and breakpoint changes for each screen or component.
Interaction and State Coverage: Captures hover, loading, error, empty, disabled, and animated states so implementation matches the intended experience.
Accessibility and Content Rules: Defines focus order, ARIA requirements, truncation behavior, edge cases, and internationalization concerns.
Use Case: A designer shares a Figma link for a new checkout screen, and this Skill produces a complete spec sheet covering tokens, components, interactions, and mobile behavior for the engineering team.

Quick Start

Provide a Figma link or design description and ask for a developer handoff spec for the screen or feature you want implemented.

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 handoff documentation from Figma?▼

To create developer handoff documentation from Figma, provide the design link or description to generate precise specs. The output includes measurements, design tokens, component props, and responsive layout behaviors for engineers.

What should a UI spec include for responsive layouts and interaction states?▼

A UI spec for responsive layouts and interaction states should include spacing, breakpoint changes, hover, loading, error, empty, and disabled states. It must also capture animations and state behavior to ensure implementation matches the intended experience.

How do I document accessibility requirements for a design handoff?▼

To document accessibility requirements for a design handoff, define focus order, ARIA requirements, truncation behavior, edge cases, and internationalization concerns. This ensures the engineering team builds compliant and usable interfaces.

Can I generate build-ready specs for a checkout screen without manual measurements?▼

Yes, you can generate build-ready specs for a checkout screen without manual measurements. By processing a design source, the skill automatically extracts precise spacing, component props, and mobile behavior for the engineering team.

What is the best way to communicate design tokens and edge cases to engineers?▼

The best way to communicate design tokens and edge cases to engineers is through a comprehensive spec sheet. This sheet removes ambiguity by detailing tokens, component interactions, and specific edge case behaviors for accurate implementation.

Does design handoff work without pre-defined components?▼

Design handoff works without pre-defined components by processing visual concepts from a design source. It generates documentation covering measurements, tokens, and state behavior, allowing engineers to build accurately even from standalone screens.