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](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; plus code robustness (security, performance, correctness) | [references/review.md](references/review.md) + [references/code-quality.md](references/code-quality.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 "" --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 impeccable@2.3.2 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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: MariusYvard
• Source: MariusYvard/NullToHero
• License: Apache-2.0
• Homepage: https://lecvdemarius.netlify.app/

Install and usage instructions live in the source repository linked above.