Responsive Layout Check
Catch the breakpoint failures before they ship — overflow, touch targets, media, layout shift — fixed at the layout level.
v1.0.0 · ~565 tokens · ⬇ 0 · Updated July 6, 2026
What it does
Checks a UI across real breakpoints for the common responsive failures (horizontal overflow #1, touch target size, text sizing, media overflow, layout shift, fixed/absolute elements) and fixes at the system level (fluid units, wrapping flex/grid, min-width:0, mobile-first, single scroll container). Fixes the layout rule, not the symptom.
Example uses
Kill horizontal scroll on mobile
Your page scrolls sideways on phones and you cannot find which element is pushing it wide.
Our analytics dashboard scrolls horizontally at 360px width. Find the element overflowing the viewport — I suspect either the pricing table or a long unbroken URL in the footer — and fix it at the layout level: overflow-x auto on the table wrapper, min-width 0 on the flex children, word-break on the URL. No overflow hidden band-aids that clip content.Check a component across breakpoints
You built a card grid on a desktop screen and want the standard breakpoint failures caught before review.
Check this PricingCards component at 360, 768, 1024, and 1440px. Specifically: does the 3-column grid wrap or squish, do the CTA buttons stay at least 44px tall for touch, does the comparison table get its own scroll container, and does anything jump or reorder between breakpoints? Fix mobile-first with fluid units, and flag blocking versus cosmetic.Fix overlapping fixed elements
A sticky header and a floating action button cover interactive content on small screens.
On screens under 400px our fixed header wraps to two lines and covers the page title, and the chat button sits on top of the cookie banner accept button. Rework both at the system level — a header offset that adapts instead of a hardcoded 64px, and safe spacing for the floating button — then verify at 360px that nothing interactive is covered.Install
# 1. Create the skill folder in your Claude setup mkdir -p ~/.claude/skills/responsive-layout-check # 2. Download SKILL.md into it (or move the file you just downloaded) # → ~/.claude/skills/responsive-layout-check/SKILL.md # 3. Claude Code auto-discovers it on next launch.
Inside the skill
--- name: responsive-layout-check description: Find responsive/layout issues across screen sizes before they ship. Use when building a page/component, on a "it breaks on mobile" report, or when asked "check responsive", "does this work on mobile", "fix the layout on small screens". Catches the common breakpoint failures. --- # Responsive Layout Check Most "it breaks on mobile" bugs are the same handful of mistakes. Check them across the real breakpoints, fix at the source (the layout system), not with one-off hacks. ## Check across widths (~360, 768, 1024, 1440) - **Horizontal overflow**: the #1 offender. A fixed width, a long unbroken string, a wide table/image, or a negative margin pushes the page wider than the viewport → horizontal scroll. Find it (an element wider than its container) and fix it (`max-width:100%`, `min-width:0` on flex children, `overflow-x:auto` on the wide thing, `word-break` on strings). - **Touch targets**: interactive elements ≥ ~44px on touch; not crammed edge-to-edge. - **Text**: readable size on mobile (don't scale below ~14-16px body); line length not absurd on wide screens (cap with `max-width` / `ch`). - **Images/media**: `max-width:100%`, height auto; no fixed pixel dimensions that overflow. - **Layout shift**: does content jump between breakpoints? Grid/flex reflow that hides or reorders critical elements? - **Fixed/absolute elements**: headers, modals, FABs — do they cover content or overflow on small screens? ## Fix at the system level - Prefer fluid units (%, `fr`, `rem`, `clamp()`, `min()`/`max()`) over fixed pixels. - Flexbox/grid that wraps, not fixed columns. `min-width:0` on flex/grid children to let them shrink (the classic overflow cause). - Mobile-first: base styles for small, layer up with `min-width` media queries. - One scroll container per wide element (table, code block) — the page body must never scroll sideways. ## Output Per breakpoint: issues found (element + symptom), the root-cause fix (not a band-aid), and which are blocking (unusable) vs cosmetic. ## Rules - Reproduce the actual overflow/break before fixing — guess-fixing responsive bugs adds hacks. - Fix the layout rule, not the symptom. A `overflow:hidden` that clips content is a cover-up.
Changelog
- v1.0.02026-07-03Initial clean-room write.
Frequently asked questions
Is Responsive Layout Check free?
Yes. Responsive Layout Check is free to download and MIT-licensed.
Where do I install Responsive Layout Check?
Place the SKILL.md file in ~/.claude/skills/responsive-layout-check/ and Claude Code auto-discovers it on next launch.
How many tokens does Responsive Layout Check use?
About 565 tokens — it is designed to be token-lean.
We're developers and SaaS builders who use these tools daily in production. Every review comes from hands-on experience building real products — DealPropFirm, ThePlanetIndicator, PropFirmsCodes, and many more. We don't just review tools — we build and ship with them every day.
Written and tested by developers who build with these tools daily.