Pixel audit

Audit one page against its source of truth, fix the mismatches, and prove each fix at the element level before claiming "verified". /design-system checks the whole library once at project start via its preview; this skill checks one product page during feature work — reference the project's library, never rebuild components here.

Inputs

Infer from the request; interview only for what's missing:

• TARGET PROJECT-CODE — full Project Matrix code; sets the stack idiom and UI library.
• SCOPE — the single page/route plus the states to audit (list/detail, modals, forms, empty/error/loading, responsive breakpoints, theme variants such as light/dark when the source has them). Scope is a hard boundary — never edit other pages, routes, or steps.
• SOURCE OF TRUTH — Figma node(s) via the Figma MCP companion, or reference screens / a reference implementation when no Figma exists. Name which is in use in the artifact. If neither is available, stop and ask — never audit against memory.
• Login / env — local credentials only, if the page needs auth.

Load first

• The target's binding context: GLOSSARY.md (legacy CONTEXT.md) and ADRs located by page/topic or linked decision; read only relevant ADRs.
• The project UI skill named in its design-system doc or AGENTS.md; fall back to detecting a *-ui-coding skill when unregistered. Reuse its components; never inline. If absent, discover tokens, library, and preview from the design-system docs or project code.

Process