What problem does it solve? Design handoffs often reach implementation with unresolved accessibility and semantics questions — missing accessible names, unclear disabled-state behavior, ambiguous document structure — forcing costly rework after code exists. This Skill extracts the binding contracts a Figma design imposes and compares them against already-shipped components before a single file is written. ## Core Features & Use Cases - Pre-implementation contract extraction: Reads a Figma node via the Figma MCP server and records anatomy, state variants (Rest, Hover, Active, Disabled), and interaction boundaries. - Precedent comparison: Reads the closest shipped component's index.tsx, type definitions, and spec artifact to check consistency with what the repository already ships. - Four-heading findings: Reports Structure, Accessible name, Imagery, and Interaction findings as text without writing any files to the working tree. - Use Case: A designer hands off a new UI component with only a Figma node id. Use this Skill to settle the semantics, accessible-name source, and disabled-state contract before a story is opened. ## Quick Start Review the Figma design at this node id against our existing components and report the accessibility and semantics contract before I start implementation.
