Responsiveness Check

Resizes a browser window through 8 standard breakpoints (or every 160px in sweep mode) and screenshots each width to catch layout breaks. The real value is in transition detection: it tells you exactly where your navigation switches to hamburger, where columns reflow, where overflow starts. Checks the eight things that actually vary by viewport (overflow, text truncation, touch target size, CTA visibility) and skips general accessibility stuff that doesn't change with width. Works with playwright-cli, Playwright MCP, or Chrome MCP. Good for debugging that mysterious tablet-range jank or confirming your CSS breakpoints match actual layout shifts.

skills.sh installs: 1.8K
GitHub stars: 1.1K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add jezweb/claude-skills --skill responsiveness-check --agent claude-code

Installs into .claude/skills of the current project.

Files

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-cli first to load the full command reference.
Playwright MCP (mcp__plugin_playwright_playwright__*) — browser_resize for viewport changes.
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.