What problem does it solve? Design-to-code pipelines fail silently when Figma files have inconsistent layer naming, missing Auto Layout, conflicting prefixes, or oversized node trees. This Skill runs a pre-generation health check on a Figma design so problems are caught and fixed before any code is produced. ## Core Features & Use Cases - Rule-based layer scanning: Runs 30+ checks (NAM/LAY/STR/AST/FEA/IMG/SUB/CLR/DIM/BGP rules) covering prefix naming, Auto Layout usage, nesting depth, duplicate names, and asset exportability. - Fidelity incident detection: Catches sub-agent merge and slicing errors such as lost data-node-ids, unreferenced sliced images, wrong text colors, and incorrect minHeight/paddingTop sources. - Actionable reports: Emits Markdown and JSON health reports with per-issue severity, owner (designer/developer), fix instructions, and direct Figma node links. - Use Case: Before converting a Figma marketing page to React code, run the health check to discover that a bg- layer should be bgc-, two sibling layers share a name, and a btn- node contains an un-ignored TEXT layer that would cause double-rendered text. ## Quick Start Paste a Figma design URL and ask the agent to run a health check on the design before generating code.
