inspect

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: 24x24px CSS minimum per WCAG 2.5.8 AA, 44x44px recommended for touch; 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 (27 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?"

Requirements

The detect and review commands call the impeccable CLI through npx. It requires Node.js and is fetched on first run. Tested with impeccable 2.3.2. To pin the version and avoid drift from upstream flag changes, run npx [email protected] instead of npx impeccable.

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