Responsiveness Check

What Is Responsiveness Check?

The Responsiveness Check skill is a browser automation tool designed to evaluate how a website's layout adapts across different viewport widths. This skill automates the process of resizing a browser window through a series of breakpoints, capturing screenshots at each size, and analyzing layout transitions such as changes in column structure, navigation switching, and content overflows. The goal is to produce detailed comparison reports that identify exactly where and how the visual structure of a webpage changes as the viewport is resized.

Unlike generic accessibility or quality checks, Responsiveness Check focuses solely on the dynamic aspects of web layouts that are affected by viewport size. By running tests through a single browser session, it ensures that stateful interactions and session-specific behaviors are preserved throughout the process, resulting in a more accurate assessment of real-world responsiveness.

Why Use Responsiveness Check?

Responsive web design is a fundamental requirement in modern web development. Users access websites from a variety of devices, each with different screen sizes and resolutions. It is critical to ensure that web applications provide a seamless experience across this spectrum. Manual testing of responsiveness by resizing browser windows is time-consuming, error-prone, and difficult to scale.

Responsiveness Check automates this tedious task. It systematically tests your site on a set of predefined or custom breakpoints, highlights layout issues that could degrade the user experience, and generates visual evidence and comparison reports. This allows developers and QA teams to:

• Quickly identify breakpoints where the layout does not adapt as expected
• Detect overflows, misplaced navigation elements, or content stacking issues
• Validate that layout transitions (such as collapsing menus or changing column counts) occur smoothly and at the intended viewport widths
• Save time by automating what would otherwise be a repetitive, manual process

Incorporating Responsiveness Check into your development workflow helps catch issues early and maintain a consistently responsive design as your project evolves.

How to Get Started

To use Responsiveness Check, you will need access to a compatible Claude Code environment and one of the supported browser automation tools. The skill prioritizes browser tools in the following order:

1. playwright-cli (preferred): Offers the most robust and flexible options for browser automation, including viewport resizing, named sessions, and parallel execution.
2. Playwright MCP: Provides browser resizing capabilities via the browser_resize command.
3. Chrome MCP: Uses resize_window for viewport manipulation within the user's existing Chrome session.

Example:

Running a Responsiveness Check with playwright-cli

Below is a sample command sequence to run a responsiveness check using playwright-cli:

## Start the playwright CLI
/playwright-cli

## Run the responsiveness check on your target URL
responsiveness check https://your-website.com

This will:

• Open the specified page
• Resize the viewport through a sequence of breakpoints (e.g., 320px, 480px, 768px, 1024px, 1280px)
• Capture screenshots at each width
• Compare adjacent screenshots to detect layout transitions and generate a report

You can trigger the skill using phrases like responsiveness check, check responsive, breakpoint test, viewport test, responsive sweep, check breakpoints, or test at mobile.

Key Features

• Viewport Sweep: Systematically resizes the browser viewport through configurable breakpoints in a single session.
• Automated Screenshot Capture: Takes screenshots at each breakpoint, providing a visual record of the layout at each size.
• Layout Transition Detection: Compares adjacent screenshots to identify where significant layout changes occur, such as:
  • Column count changes
  • Navigation element switches (e.g., desktop to mobile nav)
  • Content overflow or underflow
  • Stacking and reflow of page elements
• Comparison Reports: Generates detailed reports highlighting the exact breakpoints where layout changes or issues are detected.
• Session Preservation: By running all checks in a single browser session, it maintains login states, cookies, and dynamic content, providing accurate real-world testing.

Best Practices

• Define Custom Breakpoints: Tailor the set of viewport widths to match your site's CSS media queries and user device analytics for more targeted testing.
• Integrate into CI/CD: Automate responsiveness checks as part of your continuous integration pipeline to catch regressions early.
• Review Screenshots and Reports: Always visually inspect the screenshots and comparison reports to verify detected layout issues.
• Test Authenticated States: If your site has authenticated or personalized content, log in before running the check to ensure real-world coverage.
• Combine with Other QA Skills: Use Responsiveness Check alongside other tools like accessibility audits to ensure comprehensive quality coverage.

Important Notes

• Scope Limitation: Responsiveness Check only evaluates layout changes triggered by viewport width. It does not assess general accessibility or static code quality issues. For those, use complementary skills such as ux-audit.
• Browser Tool Requirement: The skill depends on browser automation tools (preferably playwright-cli). Ensure your environment is properly configured.
• Session Consistency: All checks occur in the same browser session, which is essential for maintaining state but may not reveal issues that only appear on hard reloads or cross-session interactions.
• Manual Verification Recommended: While automated detection is powerful, some layout nuances may still require human judgment for confirmation.
• Report Interpretation: Pay close attention to the comparison reports. Not all detected transitions are problematic—some may be intentional design features.

By integrating Responsiveness Check into your development and QA processes, you can efficiently maintain high-quality, device-agnostic user interfaces and preemptively address layout issues before they reach your users. For more details and updates, visit the source repository.