What problem does it solve? Static lint rules and jsdom-based unit tests cannot catch defects that only appear once a page is rendered, such as stray scrollbars, misaligned siblings, empty styled blocks, duplicate controls, and elements bleeding off-canvas. This skill audits the real rendered page in a shared Chrome browser and turns each confirmed defect into a deterministic check so it never needs to be found by eye twice. ## Core Features & Use Cases - Deterministic DOM probes: Inject a read-only probe script that measures horizontal overflow, zero-content boxes, sibling-edge misalignment, duplicate accessible names, and off-canvas elements, returning selectors and pixel measurements as evidence. - Structured defect checklist: Classify findings against a severity-ranked checklist (casing, alignment, scrollbar, empty-block, duplicate-control, off-canvas, overflow-clip, and more) with defined evidence requirements and severity floors. - Defect graduation workflow: Convert confirmed findings into permanent ESLint rules or Playwright assertions so each defect class is blocked at PR rather than rediscovered manually. - Use Case: After a UI rollout, sweep every top-level route at desktop and mobile viewports in both color themes, run the probes, screenshot the perceptual long tail, and render a grouped HTML report with block/warn/nit findings. ## Quick Start Inspect the rendered frontend pages for visual defects like stray scrollbars, misalignment, and off-canvas elements, then report the findings grouped by severity.
