Creates developer-handoff annotations covering behavior, responsive rules, data, states, and edge cases.
---
name: figma-annotation-guide
description: "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."
---
# 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]… load the full skill through Skill Me