What problem does it solve? Frontend developers often implement UI changes that drift from the approved Figma design, causing rework and visual inconsistencies. This Skill enforces a pre-implementation verification gate that compares every planned visual change against the Figma source of truth before any code is written. ## Core Features & Use Cases - Design Parity Verification: Pulls design context, screenshots, variable definitions, and metadata from the Figma MCP server and compares fill, color, spacing, typography, sizing, and interaction states field by field. - Capability Gating: Skips gracefully with a capability-absent note when capabilities.figma is false, without waiving the accessibility or visual-regression gates. - Divergence Handling: Stops implementation on mismatch, surfaces the exact discrepancy to the user, and records explicit overrides. - Use Case: Before modifying a React button component's hover state, run this gate to fetch the Figma node's interaction states, confirm the planned colors and spacing match the design tokens, then proceed only on a match. ## Quick Start Verify my planned changes to the header component against the Figma design at this node URL before I edit any code.
