figma-plan-review

A Claude Code skill that gate-reviews Figma implementation plans before canvas work begins, then learns from outcomes after.

What it does

• Phase A (Pre-Build): Audits your design system, checks component selection, variable bindings, structure, and project-specific lessons before you write a single use_figma call
• Phase B (Post-Build): Captures what went wrong, writes project lessons to CLAUDE.md, and evolves cross-project rules in the skill itself

Why

The #1 cause of Figma MCP rework is planning from assumption instead of audited inventory. This skill forces an inspection pass that catches:

• Building from primitives when a component exists
• Hardcoding colors/spacing when variables exist
• Wrong layout structure (3 columns vs 4 columns = full rebuild)
• Oversized DS components used where custom builds are needed
• Duplicated components (composite components that already contain sub-components)

Install

Copy to your Claude Code skills directory:

cp -r figma-plan-review ~/.claude/skills/

Or as a user-level skill in any Claude Code project.

Usage

The skill triggers on:

• "review the plan", "check this approach", "plan review"
• Before any multi-step figma-use / figma-generate-design work
• Post-build: "how did that go", "what did we learn"

Files

figma-plan-review/
  SKILL.md                      # Main skill definition
  references/
    review-checklist.md          # Detailed sub-checks for Phase A
  README.md                      # This file

Learned Rules

The skill accumulates cross-project rules in the ## Learned Review Rules section of SKILL.md. These are written by the skill itself during Phase B, gated by a strict filter: each rule must prevent a real rebuild, not be redundant, fit in one sentence, and not be something a competent agent would figure out anyway.