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](references/detect.md) | | preview [target] | Real Chromium screenshot — desktop + mobile viewports, reads back visually, fixes bugs in a loop | [references/preview.md](references/preview.md) | | review [file] | Design engineering code review — motion crimes, a11y violations, forbidden patterns, Before/After table with score | [references/review.md](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