What do I need to use Figma Annotation Guide?

Screen or component description; Platform; Interaction type; Developer audience.

Is Figma Annotation Guide free to use?

Yes — run it free in the browser playground (no API key needed for the sponsored trial, or bring any provider key), or install it into Claude Code, Cursor, ChatGPT and more via npx pm-claude-skills. MIT-licensed and open source.

Figma Annotation Guide

Q: How do I know the Figma Annotation Guide output is good?

The skill verifies itself against its own quality checks: Every interactive element has all states defined; State inventory flags missing designs; Accessibility covers touch targets and screen reader labels; Empty states specified.

🔵 Stable🕐 updated 2026-06-08 🔷 SkillSpec L3 pm-figma

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.

▶ Run it free — no key needed 📝 Grade your existing draft View SKILL.md ↗

🗣 Say this to your agent

“Write dev annotations for this Figma screen”“Create developer handoff notes for [screen/component]”“Document this design for the engineering team”“Write the Figma spec for [feature]”“What should I annotate before handing off this design?”

What to give it

▸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

✅ The bar it holds itself to

Every skill in this library self-verifies — these are this skill's own quality checks, straight from its definition.

✓Every interactive element has all states defined

✓State inventory flags missing designs

✓Accessibility covers touch targets and screen reader labels

✓Empty states specified

✓Edge cases listed as actionable questions

⚠️ What it refuses to do

Do not annotate only the happy path — error states, loading states, and empty states must all be documented

Do not use vague spacing descriptions like "some padding" — specify exact pixel values or token names

Do not skip accessibility annotations — focus order, ARIA labels, and colour contrast ratios must be included

Do not leave interaction behaviour undescribed — every interactive element needs a documented response

Do not produce annotations without edge cases — developers need to know what happens at boundaries

Install

npx pm-claude-skills add --agent claude   # or codex · cursor · gemini · hermes
# or one-line MCP (every skill, any client):
claude mcp add pm-skills -- npx -y pm-claude-skills-mcp

Start with

Related skills

🔌 Embed this skill

Drop this on your blog, docs, or site — it renders a "Run this skill" card:

<div data-pm-skill="figma-annotation-guide"></div>
<script src="https://mohitagw15856.github.io/pm-claude-skills/embed.js" async></script>

💬 Discussion

Figma Annotation Guide is one of 1078 open-source professional AI agent skills — all SkillSpec L3. Try them all in the browser · ⭐ Star on GitHub · Browse the full catalog