responsiveness-checklisted

# 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: 1. **playwright-cli** (preferred) — supports resize, named sessions, and sub-agent parallelism. If installed, run `/playwright-cli` first to load the full command reference. 2. **Playwright MCP** (`mcp__plugin_playwright_playwright__*`) — `browser_resize` for viewport changes. 3. **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 ### Mode 1: Standard Check **When**: "check responsive", "responsiveness check", "test breakpoints" Test 8 key breakpoints that cover the device spectrum: | Width | Device Context | |-------|---------------| | 320px | Small phone (iPhone SE) | | 375px | Standard phone (iPhone 14) | | 768px | Tablet portrait (iPad) | | 1024px | Tablet landscape / small laptop | | 1280px | Laptop |