responsive-breakpoint-check

Validate UI responsiveness across device widths for overflow and breakpoint regressions.

Updated Jun 28, 2026

Search Tags:#responsive design #UI testing #Playwright #browser testing #viewport testing

Ready to run

npx skills add https://github.com/Mesteriis/Engineering-Bible-AI --skill responsive-breakpoint-check

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: responsive-breakpoint-check
Source: https://github.com/Mesteriis/Engineering-Bible-AI/tree/main/skills/responsive-breakpoint-check
Command: npx skills add https://github.com/Mesteriis/Engineering-Bible-AI --skill responsive-breakpoint-check

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill helps identify UI issues such as overflow, clipping, and navigation problems across different device widths, ensuring a seamless user experience.

Core Features & Use Cases

Viewport Testing: Checks UI elements on desktop, tablet, and mobile widths.
Overflow and Clipping Detection: Inspects for overflow, wrapping, and clipped controls.
Navigation and Layout Validation: Verifies sticky headers, sidebars, dialogs, grids, charts, media, and touch targets.
Use Case: Use this Skill to test a web application's UI before deployment, ensuring it works correctly on various devices.

Quick Start

Run the responsive-breakpoint-check skill on your UI to ensure it's responsive across all devices.

Frequently Asked Questions about responsive-breakpoint-check

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I check for UI overflow and clipping across different device widths?▼

To check UI overflow and clipping across device widths, you can use viewport testing to inspect elements at desktop, tablet, and mobile breakpoints, verifying that controls render correctly without wrapping or being cut off.

Can I use Playwright to automate responsive design testing for my web application?▼

Yes, you can use Playwright to automate responsive design testing by simulating various viewport sizes, which allows you to validate navigation, grid layouts, and breakpoint regressions across desktop and mobile widths.

What layout elements should I validate during responsive viewport testing?▼

During responsive viewport testing, you should validate sticky headers, sidebars, dialogs, grids, charts, media, and touch targets to ensure navigation and layout structures adapt correctly without overflow or clipping.

Do I need a browser or Playwright to run viewport testing on my UI?▼

Yes, you need a browser or Playwright to run viewport testing on your UI, as the process requires rendering the web application at different widths and manually inspecting the UI elements for layout regressions.

Why does my web application layout break or clip controls on mobile devices?▼

Your web application layout clips controls on mobile devices due to breakpoint regressions or overflow issues, which can be identified by inspecting grids, sticky headers, and touch targets at specific mobile viewport widths.

What is the best way to detect breakpoint regressions before deploying a web UI?▼

The best way to detect breakpoint regressions before deploying a web UI is to run viewport testing across desktop, tablet, and mobile widths, checking for overflow, clipping, and navigation layout failures.