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'.
Tests website layout responsiveness by automatically resizing viewports, capturing screenshots, and detecting where design breaks occur.
npx claudepluginhub jezweb/claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/breakpoints.mdreferences/report-template.mdTest 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.
Before starting, detect available browser tools:
/playwright-cli first to load the full command reference.mcp__plugin_playwright_playwright__*) — browser_resize for viewport changes.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.
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:
When: "responsive sweep", "sweep all breakpoints", "find where it breaks"
Test every 160px from 320 to 2560 (15 widths total). Same single-session approach as Standard — just more data points. This is the mode for finding the exact width where a layout breaks.
Widths: 320, 480, 640, 800, 960, 1120, 1280, 1440, 1600, 1760, 1920, 2080, 2240, 2400, 2560
Briefly confirm before starting sweep mode (15 screenshots is a meaningful session).
When: "check between 768 and 1024", "test tablet breakpoints", "focus on mobile widths"
Test a user-specified range at 80px increments. Use when a known trouble zone needs detailed investigation.
Example: "check between 768 and 1024" tests: 768, 848, 928, 1008 (plus 1024 as endpoint).
When testing multiple URLs (e.g., "check the homepage, about page, and contact page"):
# Sub-agent pattern (playwright-cli)
playwright-cli -s=page1 open https://example.com/ &
playwright-cli -s=page2 open https://example.com/about &
These 8 checks target issues that actually vary by viewport width:
| # | Check | What to Look For |
|---|---|---|
| 1 | Horizontal overflow | Content wider than viewport — horizontal scrollbar appears, elements cut off |
| 2 | Text overflow | Text truncated mid-word, overlapping adjacent elements, font size unreadable (< 12px) |
| 3 | Navigation transition | Hamburger menu appears/disappears at correct width, no "broken" state between modes |
| 4 | Content stacking | Multi-column layouts stack to single column in logical reading order on narrow widths |
| 5 | Image/media scaling | Images overflow container, distorted aspect ratios, missing responsive sizing |
| 6 | Touch targets | Interactive elements < 44px on mobile widths (< 768px) — buttons, links, form inputs |
| 7 | Whitespace balance | Too cramped on mobile (no breathing room), too sparse on wide screens (content lost in space) |
| 8 | CTA visibility | Primary call-to-action visible above the fold at each width without scrolling |
The unique value of this skill is finding where layout transitions happen and whether they're clean.
When comparing screenshots at adjacent widths, flag any width where:
Report the exact width range where each transition occurs:
| Transition | From | To | Width Range |
|---|---|---|---|
| Nav: hamburger → full | 768px | 1024px | Switches at ~960px |
| Grid: 1-col → 2-col | 640px | 768px | Reflows at ~700px |
| Sidebar appears | 1024px | 1280px | Shows at ~1100px |
This tells the developer exactly where to set (or fix) their CSS breakpoints.
Consistent with ux-audit:
| Severity | Meaning |
|---|---|
| Critical | Layout is broken — content unreadable, navigation inaccessible, page unusable |
| High | Significant layout issue — major overflow, key content hidden, broken transition |
| Medium | Noticeable but usable — awkward spacing, minor overflow, suboptimal stacking order |
| Low | Polish — whitespace tweaks, slight alignment issues, minor touch target shortfalls |
Write report to docs/responsiveness-check-YYYY-MM-DD.md (or inline for single-page quick checks).
See references/report-template.md for the report structure.
| When | Read |
|---|---|
| Looking up breakpoint details and trouble zones | references/breakpoints.md |
| Writing the responsiveness report | references/report-template.md |
Search, retrieve, and install Agent Skills from the prompts.chat registry using MCP tools. Use when the user asks to find skills, browse skill catalogs, install a skill for Claude, or extend Claude's capabilities with reusable AI agent components.
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.