fe-design-verify

VRT check. One Storybook story vs. one specific Figma node. Reports diff ratio and a qualitative read of the diff image. Does not modify code.

The heavy lifting (Figma fetch + flatten, custom-viewport screenshot, pixelmatch) is in the bundled vrt.mjs helper. This SKILL.md orchestrates around it.

Scope: 1:1 Figma ↔ story mapping is required

VRT is a "design ↔ implementation matches" check. Without a corresponding Figma node, there is no ground truth to compare against — a failing diff cannot be distinguished from an intentional difference. This skill only verifies stories that declare a 1:1 mapping to a specific Figma node:

• Variant story (e.g. Default, WithIcon, Primary) → maps to one Figma variant node within a COMPONENT_SET.
• Matrix / overview story → maps to the parent COMPONENT_SET node (only if the rendered layout actually matches Figma's set-canvas; otherwise skip).
• Story without parameters.design.url (or matching .figma.tsx) → out of scope for VRT. Examples: edge-case stories for long text wrapping, loading / disabled states, a11y focus, responsive breakpoints. These belong in Storybook interaction / a11y / snapshot tests, not in this pipeline.

If a story should never be VRT-tested (deliberately), opt out with parameters.figmaVrt: false (recognised by this skill's discovery step).

When to use