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). 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: CONTEXT.md and specs/adr/.
• The project's *-ui-coding skill if it exists — it owns the component catalog, tokens, and gotchas. Reuse its components; never inline. If absent, discover the tokens, library, and preview from /design-system's docs or the project code.

Process