generate-component-doc-figma
Installation
SKILL.md
generate-component-doc-figma — Figma component → Markdown docs
Produce a complete documentation page for one component or component set: overview, anatomy tree,
design tokens, variants/states matrix, typography, accessibility, content guidelines, and (optionally)
design-code parity and YAML frontmatter. This skill collects structured data from the file via
use_figma, then a deterministic Node converter (scripts/generate-doc.mjs) emits the Markdown —
the same collected JSON always produces identical Markdown. Do not freehand the doc from prose.
Skill boundaries
use_figmarules — load the officialfigma-useskill first; it is the full Figma Plugin API reference. Essentials these scripts rely on: plain JS with top-levelawait+return(no IIFE, nofigma.closePlugin();console.logis not returned), inputs inlined asconstat the top of each script, colors in 0–1 range, load fonts before any text op,await figma.getNodeByIdAsync(...), and atomic errors (a failed script applies nothing — read the error, fix, retry).- The collect script runs anywhere (
use_figma); the converter is Node and runs in a terminal (node scripts/generate-doc.mjs ...). Same split asexport-tokens-figma. If you can't run Node, you can't produce the doc — say so rather than freehanding it. - Markdown section layout + the
cleanVariantNamerule → references/doc-template.md. The converter already implements every rule in that file; treat it as the spec, not a checklist for hand-assembly. - Reading/writing annotations as standalone specs → use the
annotations-figmaskill. - Exporting the whole token system (not just one component's tokens) → use
export-tokens-figma.