Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From null-to-hero
Scans for design anti-patterns, takes real Chromium screenshots, and performs design engineering code reviews. Includes deterministic checks for accessibility, layout, and motion issues.
npx claudepluginhub mariusyvard/nulltohero --plugin null-to-heroHow this skill is triggered — by the user, by Claude, or both
Slash command
/null-to-hero:inspect [detect|preview|review] [path/to/file | https://url | paste code][detect|preview|review] [path/to/file | https://url | paste code]This skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Three quality-check tools in one — run before every ship.
Conducts 7-phase frontend design review with WCAG 2.1 AA accessibility checks, responsive testing, visual polish for PR reviews, UI audits, layout issues.
Reviews web app or page visual design for layout, typography, spacing, color, hierarchy, consistency, interactions, and responsiveness. Outputs polished findings report with screenshots.
Audits frontend code for design consistency, accessibility (WCAG AA), responsive behavior, and UI/UX best practices before deployment or after design system changes.
Share bugs, ideas, or general feedback.
Three quality-check tools in one — run before every ship.
| 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 |
| 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 |
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 |
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.
If no command is specified:
previewreviewThe 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.
/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