figma-annotation-guide
Generate structured developer handoff annotations for a Figma screen or component. Use when asked to write Figma annotations, create dev handoff notes, document a Figma design for developers, or write specs for a screen. Produces a complete annotation set covering interactions, states, spacing, accessibility, and edge cases.
npx skills add mohitagw15856/pm-claude-skills --skill figma-annotation-guide --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Figma Annotation Guide Skill Produces a complete set of developer handoff annotations for a Figma screen or component — the notes that turn a visual design into a buildable spec. ## Required Inputs - **Screen or component description** (describe or summarise what was designed) - **Platform** (iOS / Android / Web / React Native) - **Interaction type** (static / interactive / animated / form) - **Developer audience** (mobile / frontend / full-stack) ## Output Structure ### 1. Screen/Component Overview Name, purpose, entry points, exit points. ### 2. Interaction Annotations **[Element name]** - Default state: [Visual description] - On tap/click: [Exact action — API call, state change, navigation] - Loading state: [Description] - Success state: [What happens after] - Error state: [What error looks like and user options] - Disabled condition: [When and why] ### 3. State Inventory | Element | States Required | |---|---| | [Element] | Default, Hover, Active, Disabled, Loading, Error, Empty | Flag missing designs: "Warning: Error state not designed — needed before build" ### 4. Spacing and Layout Notes Fixed vs fluid elements, scroll behaviour, breakpoints, safe areas. ### 5. Content and
- Required Inputs
- Output Structure
- 1. Screen/Component Overview
- 2. Interaction Annotations
- 3. State Inventory
- 4. Spacing and Layout Notes
- 5. Content and Copy Rules
- 6. Accessibility Annotations
- 7. Edge Cases and Developer Questions
- Quality Checks
- Anti-Patterns
- Example Trigger Phrases
What does the figma-annotation-guide skill do?
Generate structured developer handoff annotations for a Figma screen or component. Use when asked to write Figma annotations, create dev handoff notes, document a Figma design for developers, or write specs for a screen. Produces a complete annotation set covering interactions, states, spacing, accessibility, and edge cases.
How do I install it?
Run `npx skills add mohitagw15856/pm-claude-skills --skill figma-annotation-guide --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From mohitagw15856/pm-claude-skills, a repository with 1,255 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.