responsiveness-check

responsiveness-check tests how a website's layout responds to viewport width changes using browser automation. It solves the tedious, error-prone task of manually resizing a browser through many widths to find where a layout breaks. It resizes a single browser session through a set of breakpoints, screenshots each width, compares adjacent sizes, and produces a report showing exactly where layout transitions and failures occur. It is scoped deliberately to layout responsiveness — overflow, stacking, navigation transitions, and content reflow — and explicitly does not test general accessibility, which does not vary by viewport width.

The skill detects available browser tooling in priority order (playwright-cli preferred, then Playwright MCP, then Chrome MCP) and offers three operating modes: a Standard check across eight key device breakpoints, a Sweep mode testing every 160px from 320 to 2560 to pinpoint the exact break width, and a Targeted Range mode at 80px increments for a known trouble zone. For multiple URLs it launches parallel sub-agents, one per URL, each in its own named session. An eight-point layout check matrix targets issues that genuinely vary by width — horizontal overflow, text overflow, navigation transitions, content stacking, image/media scaling, and more — and a report template structures findings by severity, with a transition-analysis table and effort-grouped recommendations. It is marked claude-code-only.

Target users are frontend developers, designers, and QA engineers who want a fast, repeatable responsiveness audit. Typical use cases include checking a page before launch, finding the exact width where a grid or nav breaks, and comparing several pages of a site at once. The automation only opens and resizes pages and takes screenshots — read-only, non-destructive browser operations.