skills.rest
arayaroma
arayaromaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

responsive-audit

Audit and fix web layouts across mobile, laptop, and ultrawide viewports.

Updated Jul 27, 2026
Search Tags:#layout#frontend#responsive design#css#audit#viewport#horizontal overflow
One-click install
npx skills add https://github.com/arayaroma/ether --skill responsive-audit-arayaroma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-audit
Source: https://github.com/arayaroma/ether/tree/main/skills/responsive-audit
Command: npx skills add https://github.com/arayaroma/ether --skill responsive-audit-arayaroma

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Responsive UI bugs like horizontal overflow often slip through because pages are only checked at one screen size. This Skill enforces a disciplined audit of web layouts at multiple viewport widths so layout regressions are caught and fixed at the correct owning element before release. ## Core Features & Use Cases - Multi-viewport checks: Renders and inspects the page at 390px, 1366px, and 2560px, plus any width near a layout breakpoint. - Horizontal overflow gate: Compares document.documentElement.scrollWidth against clientWidth at every checked width and treats any mismatch as a release blocker. - Root-cause fixes: Targets the smallest owning layout, addressing common causes such as width: 100% with padding under content-box, intrinsic minimum widths in flex children or Shadow DOM, and controls that stay on one row at mobile widths. - Use Case: Before shipping a new dashboard page, run the audit to confirm no horizontal scrollbar appears on mobile, then fix the offending flex child and verify with a build or type check. ## Quick Start Audit this page for responsive layout issues at mobile, laptop, and ultrawide widths and fix any horizontal overflow you find.

Frequently Asked Questions about responsive-audit

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

FAQPage Schema
How do I check a web page for horizontal overflow?▼

Compare document.documentElement.scrollWidth with document.documentElement.clientWidth at each tested viewport width. If scrollWidth exceeds clientWidth, the page has horizontal overflow, which this audit treats as a release blocker unless a horizontal-scrolling region is intentional.

What viewport widths should I test for responsive design?▼

Test at 390px for mobile, 1366px for laptop, and 2560px for ultrawide displays. Add an extra viewport near any layout breakpoint in your CSS so breakpoint-specific issues are also captured.

Why does my page have a horizontal scrollbar on mobile?▼

Common causes are width: 100% combined with padding under content-box, intrinsic minimum widths in flex children or Shadow DOM, and controls that remain on one row at small widths. Fix the smallest owning layout rather than masking the overflow globally.

Are screenshots enough to verify a responsive layout?▼

No. Screenshots alone are not accepted as evidence because overflow can be invisible in a static image. You must measure scrollWidth and clientWidth numerically at each viewport and finish with a build or type check.

When is horizontal scrolling acceptable in a responsive layout?▼

Horizontal scrolling is acceptable only when the task explicitly calls for a horizontal-scrolling region, such as preserving semantic table scrolling when reflowing the data would make it less usable.

Related Skills

Explore More Software Engineering Skills→
marvelousempiremarvelousempire

full-viewport-responsive-dashboard-shell

Build and verify responsive dashboard shells for phone, laptop, ultrawide, and TV displays.

Community
Intermediate
ArthTech-AIArthTech-AI

verification-before-completion

Verify completion claims by running commands and reading output before reporting success.

Official
Intermediate
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-viewport-meta

Detect missing or misconfigured viewport meta tags in web pages.

Community
Basic
giljaegiljae
1

browse

Automate website testing with a headless Chromium environment.

Community
Intermediate