visual-audit

Provide a screenshot of the component (from Storybook or the product) and invoke the audit. The Skill measures pixel distances against the component's spec-declared tokens across 13 checklist items and writes a structured Markdown report with PASS, FAIL, or undetermined verdicts.

It catches asymmetric container padding, hover backgrounds overflowing and eating declared flex gaps, overlay elements covering anchor content, icon-text baseline misalignment, zoom steps that jump too far, and dark-mode contrast or shadow token failures — defects where code and spec are correct but rendered pixels are wrong.

No. The Skill refuses to proceed without screenshot evidence and will not guess from descriptions. It first tries to generate captures through the existing Storybook or product capture pipeline, and only reports an evidence gap when capture is genuinely impossible.

No, it is strictly read-only. It reports measured values, expected token values, and the violated rule, then hands evidence back for remediation through the code-level audit skills or direct edits. It never modifies code, specs, tokens, or stories.

Layer A is the mechanical script (npm run visual-audit) that captures retina screenshots, runs WCAG contrast scans, and checks DOM geometry assertions. Layer B is this Skill, which reads that report and applies judgment on design reasonableness, cross-component consistency, and world-class benchmark comparison.

When screenshot resolution, angle, or missing states prevent reliable measurement, the item is marked undetermined with a note on what evidence is needed. Subjective impressions like 'looks off' are never recorded as audit conclusions; every verdict must be mechanically verifiable.