SKILL.md
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.