Skip to content
Get packs

Prevent horizontal scrolling

Checks CSS layouts so pages don't force sideways scrolling at narrow widths or high zoom.

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

Once installed, the agent reviews web page layout code (CSS and responsive styles) for things that cause sideways scrolling, such as fixed-pixel widths, 100vw units, unbreakable text, and images without max-width. It checks these against the WCAG 2.1 accessibility guideline for reflow at 320px width or 400% zoom, and suggests specific fixes like fluid widths, overflow-wrap, and scrollable table wrappers. It is a guidance and review checklist; it does not change files by itself based on the files provided.

Great for

  • Front-end developers making a site responsive and accessible
  • Teams auditing an existing site for WCAG 2.1 Level AA reflow compliance
  • Designers handing off layouts that must work at high zoom or on narrow phones

Skip it if

  • Native mobile apps or non-web interfaces, since it targets CSS and browser layouts (the guidance does not apply)
  • Data-heavy content such as tables or maps that legitimately need two-dimensional scrolling; the skill notes exceptions but the agent may still over-flag them
  • Replacing real testing with a screen magnifier or assistive technology, because the skill only describes how to test and review code

Try asking

  • “Audit my stylesheet for anything that would cause horizontal scrolling at 320px width.”
  • “Check this landing page CSS for WCAG 1.4.10 reflow problems and suggest fixes.”
  • “Why does my product card overflow at 400% zoom, and how do I fix it?”
  • “Review my responsive components for width: 100vw and fixed pixel widths that break layout.”
Step-by-step guide: how to use Prevent horizontal scrollingInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    horizontal-scroll.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip horizontal-scroll.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip horizontal-scroll.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Paste the relevant CSS or component files along with the page's HTML so the agent can trace the exact selectors causing overflow.
  • Still verify in a real browser at 320px width and 400% zoom, since static review can miss runtime overflow.
  • Name the framework you use (for example Tailwind or CSS Modules) to get fixes that match your setup, since the skill points to references/rule.md for framework guidance.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.