/audit

name: audit
description: Score an existing React + Tailwind site against the anti-slop checklist and produce DESIGN-AUDIT.md with evidence. Use when the user says their site "looks AI-generated", "looks generic", "feels off", asks "why is my site ugly", or wants a design audit/score before improving it. Read-only — never edits source.

Design Audit

Audit the current project's visual design and produce a scored, evidence-backed `DESIGN-AUDIT.md`. This skill is **strictly read-only on source code** — it writes only the audit report and screenshots.

Preconditions

1. Confirm the project is React + Tailwind (look for `tailwind.config.*` or the Tailwind v4 CSS import, plus React in package.json). If it isn't, stop and say: v1 of unslop supports React + Tailwind only. 2. The site must be viewable. Find the dev command (`npm run dev` or equivalent) and the port. Start it in the background if not already running.

Procedure

1. **Capture.** Run the bundled screenshot script against the running site:

   node "${CLAUDE_PLUGIN_ROOT}/scripts/screenshot.mjs" <url> ./unslop/screenshots

It captures 375 / 768 / 1024 / 1440 px full-page shots and reports horizontal overflow per viewport. If Playwright is missing, it prints install instructions — follow them, then re-run.

2. **Deterministic checks.**

   node "${CLAUDE_PLUGIN_ROOT}/scripts/slop-scan.mjs" .
   node "${CLAUDE_PLUGIN_ROOT}/scripts/contrast-check.mjs" <url>

`slop-scan` greps the source for slop tells (stock palette, transition-all, arbitrary px values, uniform radius, weight sprawl) with file:line evidence. `contrast-check` reports WCAG AA failures on the rendered page.

3. **Visual evaluation.** Read all four screenshots. Walk `${CLAUDE_PLUGIN_ROOT}/rules/anti-slop-checklist.md` item by item — every item is PASS / FAIL / N-A with evidence (file:line from the scans, or a screenshot observation named precisely, e.g. "1440px: hero is centered headline + two buttons + 3-col icon grid → L1 FAIL"). Read key source files to confirm suspected failures; do not guess.

4. **Report.** Write `unslop/DESIGN-AUDIT.md`:

• **Overall score** (passes ÷ applicable × 100) and per-category scores.
• **Failures with evidence**, grouped by category, referencing checklist IDs.
• **Top 5 fixes by visual impact**, ordered, each mapped to checklist IDs.
• Paths to the screenshots.

5. **Tell the user** their score, the 2–3 most damning findings in plain language, and the next step: run `/unslop:interview` to define a design lane, then `/unslop:retheme` to fix it.

Rules

• Never modify source files, configs, or styles. Audit only.
• Every failure needs evidence a stranger could verify. "Feels generic" is banned.
• If the dev server can't start, report the build error and stop — that's a

prerequisite bug, not a design finding.