メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| 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. |
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.
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.npm run dev or equivalent)
and the port. Start it in the background if not already running.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.
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.
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.
Report. Write unslop/DESIGN-AUDIT.md:
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.
Systematically apply an approved design lane (LANE.md) to a React + Tailwind site — tokens first, then section-by-section, with build + screenshot verification after every pass. Use when the user says "retheme", "apply the lane", "make it match the design", or after /unslop:interview produced an approved LANE.md.
Interview the user about taste, brand, and audience, then synthesize a custom design lane (LANE.md + tokens) for their React + Tailwind site. Use when the user wants a design direction, says "make it look premium/professional/not AI-generated", or after /unslop:audit before any re-theming. No code changes — output is the approved LANE.md.