responsiveness-check
Test website responsiveness across viewport widths, detect layout transitions, and report where layouts break.
- Supports three operating modes: Standard Check (8 key breakpoints), Sweep (15 widths at 160px increments), and Targeted Range (user-specified widths at 80px increments)
- Runs 8 layout checks per viewport covering horizontal overflow, text overflow, navigation transitions, content stacking, image scaling, touch targets, whitespace balance, and CTA visibility
- Detects and reports exact width ranges where layout transitions occur (column changes, nav switches, sidebar toggles) to pinpoint CSS breakpoint issues
- Handles multi-URL testing via parallel sub-agents, each running in its own named browser session; requires playwright-cli or Playwright MCP for viewport resizing
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
More from jezweb/claude-skills
tailwind-v4-shadcn
|
2.7Kshadcn-ui
Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes (forms, data tables, navigation, modals). Use after tailwind-theme-builder has set up the theme infrastructure, when adding components, building forms, creating data tables, or setting up navigation.
2.6Ktanstack-query
|
2.5Ktailwind-theme-builder
Set up Tailwind v4 + shadcn/ui themed UI with dark mode. Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify. Use whenever the user mentions Tailwind v4, setting up Tailwind theming, shadcn/ui colours, dark mode, or troubleshooting colours not working, tw-animate-css errors, @theme inline conflicts, @apply breaking after upgrade, or v3 → v4 migration issues.
2.3Kcolor-palette
Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS output, WCAG contrast checks. Use whenever the user supplies a brand hex and asks for a palette, mentions setting up a design system, wants Tailwind theme colours from a brand colour, or asks to check colour accessibility / contrast.
2.0Kfastapi
|
2.0K