Responsiveness Check
Test website responsiveness across viewport widths using browser automation.
Install
npx skills add jezweb/claude-skills --skill responsiveness-check -g -a claude-code -y- Repository
- jezweb/claude-skills1.1k
- Category
- Testing
- Updated
- 26d ago
- License
- MIT
- Context cost
- Mediumabout 1,614 tokens
- Runs scripts
- No, instructions only
What it does
Test website responsiveness across viewport widths using browser automation. Resizes a single session through breakpoints, screenshots each width, and detects layout transitions (column changes, nav switches, overflow). Produces comparison reports showing exactly where layouts break. Trigger with 'responsiveness check', 'check responsive', 'breakpoint test', 'viewport test', 'responsive sweep', 'check breakpoints', or 'test at mobile'.
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
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 |
| 1440px | Desktop |
| 1920px | Full HD |
| 2560px | Ultra-wide / 4K |
Process:
