figma-annotation-guide
OfficialTurn Figma screens into build-ready specs.
System Documentation
What problem does it solve?
It eliminates back-and-forth between designers and engineers by converting a Figma screen or component into precise developer handoff annotations that cover interactions, states, layout, accessibility, and edge cases.
Core Features & Use Cases
- Developer handoff specs: Produces a complete annotation set for a Figma screen/component that engineering teams can implement without guessing.
- Interaction and state documentation: Documents default, loading, success, error, and disabled conditions plus a state inventory per element.
- Build-critical clarity: Adds spacing/layout notes, content and copy rules, accessibility guidance, and a checklist of unresolved questions to flag missing design decisions.
Use case: When you receive a Figma screen for implementation, generate a structured set of notes so frontend or mobile developers know exactly what to build, including edge cases like missing error states and required accessibility details.
Quick Start
Generate dev handoff annotations for the Figma screen described as "a new settings page with a profile card, toggle controls, and a save action" for web developers.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: figma-annotation-guide Download link: https://github.com/spontus-reach/spontus/archive/main.zip#figma-annotation-guide Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.