>- Design Health — runs 19 deterministic quality checks on HTML output. Use when the user says /reimagine-it audit, "audit this page", "check design quality", or wants to verify craft-floor compliance before shipping. Catches blank plates, missing focus rings, non-compositor motion, off-palette accents, dead motion, fabricated content. No LLM, no API key. CI-ready with --json and exit codes. Part of the reimagine-it Content-Derived Design suite.
npx skills add https://github.com/Kayforkind/reimagine-it --skill reimagine-it-audit
Parent: ../SKILL.md — the full Content-Derived Design engine. This sub-skill handles only the deterministic quality check.
Runs npx reimagine-it audit — 19 checks across 6 categories (src/audit.js; Python scripts/audit.py is the CI mirror):
| Category | Checks | What it catches |
|----------|--------|-----------------|
| Typography | 3 | Banned default fonts, type-scale range, measure > 65ch |
| Palette | 3 | Palette drift, transition: all, un-styled ::selection |
| Motion | 4 | Outline removal, missing prefers-reduced-motion, missing :focus-visible, non-compositor animation |
| Content | 4 | Placeholder copy, vibe adjectives, emoji farm, <br><br> spacing |
| Structure | 3 | CDN, external font fetch, figure system doing no work |
| Performance | 2 | Images without dimensions, long pages without content-visibility |
# Agent
/reimagine-it audit path/to/page.html
# CLI (Node — no Python required)
npx reimagine-it audit gold/webpage/after.html
npx reimagine-it audit gold/webpage/after.html --verbose
npx reimagine-it audit gold/webpage/after.html --json
# CI mirror
python scripts/audit_all.py
| Code | Meaning |
|------|---------|
| 0 | CLEAN — no issues |
| 1 | WARNINGS — advisory only, no blockers |
| 2 | FAIL — must fix before shipping |
python scripts/audit.py <path>.python scripts/audit_all.py to audit all gold files.--verbose, show per-category breakdown.--json, output machine-readable JSON for CI.scripts/audit.pyTake kayforkind/reimagine-it-audit from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.
The instructions reference npx.
Without those the skill loads but fails at the first command.