responsiveness-check

1# Responsiveness Check
2 
3Test 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.
4 
5**What this tests**: Layout responsiveness — overflow, stacking, navigation transitions, content reflow.
6 
7**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.
8 
9## Browser Tool Priority
10 
11Before starting, detect available browser tools:
12 
131. **playwright-cli** (preferred) — supports resize, named sessions, and sub-agent parallelism. If installed, run `/playwright-cli` first to load the full command reference.
142. **Playwright MCP** (`mcp__plugin_playwright_playwright__*`) — `browser_resize` for viewport changes.
153. **Chrome MCP** (`mcp__claude-in-chrome__*`) — `resize_window` for viewport changes. Uses the user's logged-in Chrome session.
16 
17If none are available, inform the user and suggest installing playwright-cli or Playwright MCP.
18 
19## Operating Modes
20 
21### Mode 1: Standard Check
22 
23**When**: "check responsive", "responsiveness check", "test breakpoints"
24 
25Test 8 key breakpoints that cover the device spectrum:
26 
27| Width | Device Context |
28|-------|---------------|
29| 320px | Small phone (iPhone SE) |
30| 375px | Standard phone (iPhone 14) |
31| 768px | Tablet portrait (iPad) |
32| 1024px | Tablet landscape / small laptop |
33…