Three quality-check tools in one — run before every ship.
Commands
| Command | What it does | Reference |
|---|---|---|
detect [target] | Deterministic anti-pattern scan — finds focus rings, clipped dropdowns, pure black/white, tiny touch targets, missing reduced-motion, and more | references/detect.md |
preview [target] | Real Chromium screenshot — desktop + mobile viewports, reads back visually, fixes bugs in a loop | references/preview.md |
review [file] | Design engineering code review — motion crimes, a11y violations, forbidden patterns, Before/After table with score | references/review.md |
When to use which
| Situation | Command |
|---|---|
| "Are there any design problems in my code?" | detect |
| "What does my site actually look like?" | preview |
| "Review my code before I ship" | review |
Just built something with /siteasy build | preview → detect → review |
Severity order
Triage findings highest severity first: fix CRITICAL before HIGH, HIGH before MEDIUM, MEDIUM before LOW. This mirrors the priority order /siteasy builds against, so detection and construction never disagree on what to fix first.
| # | Category | Severity |
|---|---|---|
| 1 | Accessibility (contrast, focus rings, alt text, keyboard, aria-labels) | CRITICAL |
| 2 | Touch and interaction (target size 44x44px, spacing, feedback) | CRITICAL |
| 3 | Performance and Core Web Vitals (WebP/AVIF, lazy-load, CLS, LCP) | HIGH |
| 4 | Structure and semantics (heading order, landmarks, valid HTML) | HIGH |
| 5 | Layout and responsive (breakpoints, viewport, no horizontal scroll) | HIGH |
| 6 | Typography and color (sizes, line-height, semantic tokens) | MEDIUM |
| 7 | Motion (duration, meaning, prefers-reduced-motion) | MEDIUM |
| 8 | Forms and feedback (labels, inline errors, autocomplete) | MEDIUM |
| 9 | Navigation (back behavior, primary items, active state) | MEDIUM |
| 10 | Data and charts (legends, tooltips, accessible encoding) | LOW |
Detection rules from data
Beyond the deterministic scan, detect can read tools/data/inspect-rules.csv for editable Do/Don't rules with good and bad code examples (25 rules) — extend coverage without changing code. To locate a relevant reference fast: node tools/search-references.mjs "<topic>" --skill inspect.
Quick start
If no command is specified:
- With a URL or file path → default to
preview - With pasted code → default to
review - Otherwise ask: "Do you want a screenshot, an anti-pattern scan, or a code review?"
Recommended pre-ship sequence
/inspect detect index.html ← catch obvious anti-patterns first
/inspect preview index.html ← see what it looks like in a real browser
/inspect review index.html ← final engineering quality gate