What problem does it solve? Responsive layout bugs hide at specific viewport widths and are tedious to find manually. This Skill automates resizing a browser session through standard breakpoints, screenshots each width, and pinpoints exactly where layouts break — overflow, broken navigation transitions, bad stacking, and unreadable text. ## Core Features & Use Cases - Three testing modes: Standard check (8 key breakpoints from 320px to 2560px), Sweep mode (15 widths at 160px increments to find the exact breaking point), and Targeted Range mode for investigating known trouble zones like 768–1024px. - Transition detection: Compares adjacent widths to identify where column counts change, navigation switches between hamburger and full modes, and sidebars appear — reporting the exact width range of each transition. - Structured severity reports: Classifies findings as Critical/High/Medium/Low and writes a findings-first report to docs/responsiveness-check-YYYY-MM-DD.md with fix suggestions grouped by effort. - Use Case: Before shipping a landing page, ask for a responsiveness check; the Skill resizes through all breakpoints, catches that hero text overflows at 320px and the nav transition flickers near 960px, and delivers a report with CSS fix suggestions. ## Quick Start Run a responsiveness check on https://example.com across all standard breakpoints and report where the layout breaks.
