responsiveness-check
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-clifirst to load the full command reference. - Playwright MCP (
mcp__plugin_playwright_playwright__*) —browser_resizefor viewport changes. - Chrome MCP (
mcp__claude-in-chrome__*) —resize_windowfor 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
More from jezweb/claude-skills
tailwind-v4-shadcn
|
2.7Ktanstack-query
|
2.5Kshadcn-ui
Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes (forms, data tables, navigation, modals). Use after tailwind-theme-builder has set up the theme infrastructure, when adding components, building forms, creating data tables, or setting up navigation.
2.5Ktailwind-theme-builder
>
2.2Kfastapi
|
2.0Kcolor-palette
>
1.9K