frontend-auditlisted

# `/frontend-audit` — the UI quality gate (mechanical floor) > Part of the **product-playbook UI suite** (mastered here; see `/design-system`). `/design-system` > *decides* the look and writes `DESIGN.md` + the 22 universal laws; **this skill *enforces* the > mechanically-checkable subset** so a guaranteed floor holds regardless of who built the screen. > It does **not** judge taste/archetype fit — it checks what a machine can prove. ## What it does Runs `audit.py` (stdlib-only, portable, ASCII output — no `PYTHONUTF8` needed) over UI files and `DESIGN.md`, and prints a scorecard. **Exits non-zero if any ERROR-level law fails** (CI-friendly). ``` python commands/frontend-audit/audit.py <file-or-dir> [more...] # e.g. python .../audit.py frontend/ · python .../audit.py DESIGN.md sample.html ``` ## What it checks (the mechanical subset of the 20 laws) | Law | Check | |---|---| | **7 — contrast (the headline)** | **Computes** WCAG ratio for every foreground/surface token pair — shadcn names **plus common aliases** (`--text`/`--surface`/`--bg`/`--text-muted`…) — (OKLCH or hex → relative luminance → ratio). `<4.5` body = ERROR, `3–4.5` = large-only WARN. **Anti-false-pass:** if colour tokens exist but no pair was checkable, it **WARNs "unverified"** rather than silently reporting ok. *This is the law `/design-system` could only assert.* | | **7b — status colours, two bars** | Every status token (`--success`/`--warning`/`--destructive`/`--info` and friends) against `--card`