What problem does it solve? Static code review misses real responsive layout defects and invents false ones. This Skill audits a web UI empirically by rendering every servable surface across a phone/tablet/desktop viewport matrix in both orientations and light/dark themes, letting the browser reveal actual horizontal overflow, undersized tap targets, and iOS input-zoom traps. ## Core Features & Use Cases - Empirical viewport-matrix rendering: Renders each surface across phones (320–414px, both orientations), tablets, and desktops in light and dark modes using a preinstalled Chromium via playwright-core. - Mechanical defect detection: The injected DOM probe flags horizontal overflow with offending elements, sub-44px tap targets (WCAG 2.5.5), sub-16px inputs, and viewport-meta zoom suppression, then exits non-zero so it works as a CI pre-merge gate. - Root-cause workflow: Combines the render with targeted ripgrep anti-pattern scans to pin each defect to a file:line, and produces a severity-tagged (S1/S2/S3) findings report with exact fixes. - Use Case: When users report that a frontend "isn't optimized for mobile" or text spills outside its container, run the probe against the app, get a JSON defect log plus screenshots per viewport, fix the S1 issues, and commit the probe as a permanent regression gate. ## Quick Start Ask the agent to run the responsive probe against your app's URL and report every horizontal overflow, small tap target, and sub-16px input it finds across the full device matrix.
