responsiveness-check

SKILL.md

Test website responsiveness across viewport widths, detect layout transitions, and report where layouts break.

Supports three operating modes: Standard Check (8 key breakpoints), Sweep (15 widths at 160px increments), and Targeted Range (user-specified widths at 80px increments)

Runs 8 layout checks per viewport covering horizontal overflow, text overflow, navigation transitions, content stacking, image scaling, touch targets, whitespace balance, and CTA visibility

Detects and reports exact width ranges where layout transitions occur (column changes, nav switches, sidebar toggles) to pinpoint CSS breakpoint issues

Handles multi-URL testing via parallel sub-agents, each running in its own named browser session; requires playwright-cli or Playwright MCP for viewport resizing

Responsiveness Check

Test how a website's layout responds to viewport width changes. Resizes through breakpoints in a single browser session, screenshots each width, compares adjacent sizes, and reports where layouts break.

What this tests: Layout responsiveness — overflow, stacking, navigation transitions, content reflow.

What this does NOT test: General accessibility (ARIA, semantic HTML, heading hierarchy, colour contrast). Those don't vary by viewport width — use the ux-audit skill instead.

Browser Tool Priority

Before starting, detect available browser tools:

playwright-cli (preferred) — supports resize, named sessions, and sub-agent parallelism. If installed, run /playwright-cli first to load the full command reference.

Playwright MCP (mcp__plugin_playwright_playwright__*) — browser_resize for viewport changes.

Chrome MCP (mcp__claude-in-chrome__*) — resize_window for viewport changes. Uses the user's logged-in Chrome session.

If none are available, inform the user and suggest installing playwright-cli or Playwright MCP.

Operating Modes