v2.4.0 — Reference extraction + fidelity & token-drift verification

Additions from a second design-skill audit that complete the v2.2.0–v2.3.1 work (rendered verification + the MASTER template) rather than duplicate it. Full history in CHANGELOG.md.

What's new

Reference → design system (extraction)

• recipes/extract-design-from-reference.md — turn a reference (image / live site / Figma) into a filled design-system-master.md + DTCG design-tokens.json + a component inventory, before building. Prefers extracted values (CSS --*, Figma variables) over inferred ones, tags every inference with confidence (✅ extracted / ⚠️ inferred / ❓ uncertain), and ends with explicit Open Questions instead of fabricating interaction states or dark mode a static frame can't show. Composes with the MASTER template.

rule 20 — verification, completed

• R6 — fidelity to the reference. Correctness gates don't prove the build matches intent. When a reference exists, diff the rendered build against it across layout / type / color / spacing / radii / shadow / assets — and confirm 1px borders + shadow spread by computed value, since vision comparison slips on those.
• R7 — token-drift audit. A declared token isn't proof it's applied: hardcoded literals that should be var(), out-of-sync duplicated copies, defined-but-unused / used-but-undefined tokens. Exactly the failure the demo gallery hit in v2.3.1. New live-audit-snippets.md snippet K (declared :root vs used) backs it.

At a glance

245 files · 21 rules · 46 patterns-and-recipes surface (16 recipes) · 27 references · 11 agents · 13 industry sectors.
Standards floor: CSS 2026 Baseline · React 19 · Next.js 15 · Tailwind v4 · WCAG 2.2 AA · OKLCH-only.

Principle: extraction before building, fidelity-to-reference after — and a token you declared is only real once the rendered DOM proves it.