← ClaudeAtlas

responsive-reviewlisted

Verify declared breakpoints are exercised, no horizontal scroll appears, touch targets meet spec, and RTL parity holds when declared.
Eliyce/paqad-ai · ★ 4 · Code & Development · score 76
Install: claude install-skill Eliyce/paqad-ai
## What It Does Verifies the running UI at every declared breakpoint. Catches horizontal scroll, touch targets below the declared minimum, RTL parity gaps, and breakpoints declared in `responsive.md` that no route actually exercises. ## Use This When Use for every design-test run. Driven by the surface walk's screenshot manifest from `runtime-checks.ts` (Step 3). ## Inputs - Read `docs/instructions/design-system/responsive.md` for declared breakpoints and rules. - Read the surface-walk JSON from `runtime-checks.ts`. - Read `references/responsive-checklist.md`. ## Procedure Enumeration and gap detection are deterministic — drive them with the scripts. The LLM picks severity and writes findings. 1. Run `scripts/extract-breakpoints.sh <responsive.md>` → `<name>\t<width-px>` TSV. This is the declared truth. 2. Run `scripts/find-horizontal-scroll.sh <runtime-checks.json>` → one row per `(route, breakpoint)` pair where `horizontalScroll=true`. Each row is a finding candidate. 3. Run `scripts/find-touch-target-violations.sh [--min <px>] [search-root]` → rows for icon-only / tap targets below the declared minimum (default 24px; pass `--min 44` for mobile-first). 4. If `responsive.md` declares RTL support: cross-walk each route with `dir="rtl"`; flag layout breaks (no scripted detector — visual inspection of the RTL screenshot manifest). 5. If a declared breakpoint has zero routes exercising it in the surface walk → `documentation-drift` finding. ## Output Contract - Match `