figma-generate-component-doclisted

Generate complete Markdown documentation for a Figma component — anatomy/layer tree, design tokens (colors, spacing, typography), states/variants matrix, accessibility notes, content guidelines, and optional code-parity + YAML frontmatter. Use when the user wants a docs page or handoff spec for a component or component set. Triggers: 'document this component', 'generate component docs/spec', 'create a docs page for the Button', 'write up the anatomy and variants', 'component handoff doc from Figma', 'turn this component into Markdown docs'. Reads the node tree, bound variables/tokens, and designer annotations, then the agent assembles Markdown. Requires the Figma Desktop app (Plugin API).
whiskfernlowdensitylipoprotein154/figma-console-mcp-skills · ★ 0 · Web & Frontend · score 75

Install: claude install-skill whiskfernlowdensitylipoprotein154/figma-console-mcp-skills

# figma-generate-component-doc — 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_figma` rules** — load the official **`figma-use`** skill first; it is the full Figma Plugin API reference. Essentials these scripts rely on: plain JS with top-level `await` + `return` (no IIFE, no `figma.closePlugin()`; `console.log` is not returned), inputs inlined as `const` at 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 as `figma-export-tokens`. If you can't run Node, you can't produce the doc — say so rather than freehanding it. - **Markdown section layout + the `cleanVariantName` rule** → [references/doc-template.md](references/doc-template.md). The converter already implements eve