Guide · Agent skill
How to use the Prevent horizontal scrolling agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The horizontal-scroll skill is a set of instructions that teaches an AI agent to review web page layout code for anything that causes sideways scrolling. It is aimed at front-end developers, teams auditing for WCAG 2.1 Level AA reflow, and designers handing off layouts that must work at high zoom. After this guide you will know what the skill does, how to install it, how to ask for it in plain language, and where its limits are.
Prevent horizontal scrollingthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the horizontal-scroll skill ZIP from the directory page.
- 2Unzip into a skills folder. Place the horizontal-scroll folder in ~/.claude/skills/ for personal use, or in .claude/skills/ inside a project.
- 3Or upload it in the Claude apps. Open Settings, go to Capabilities, and upload the skill under Skills.
- 4Ask for a layout review. Describe the files or components and mention responsive design, WCAG 2.1 reflow, 320px or 400% zoom.
- 5Review the findings. Check each flagged selector or breakpoint against what the rendered page actually does.
- 6Apply and retest. Apply the chosen fixes yourself, then test the page at 320px width and 400% browser zoom.
What is the horizontal-scroll skill and what does it make the agent do?
Agent skills are folders of instructions that an AI agent can load when a task matches the skill's description. This one covers the CSS side of responsive design. Once installed, the agent reviews layout code (CSS and responsive styles) for things that cause horizontal scrolling, such as fixed-pixel widths, 100vw units, unbreakable text, and images without max-width.
The checks are tied to WCAG 2.1 SC 1.4.10 (Reflow). The skill asks the agent to test at a 320px CSS viewport width, which is equivalent to 400% browser zoom on a 1280px screen, and to look for horizontal scrollbars or content that overflows the viewport. It then suggests specific fixes such as fluid widths, overflow-wrap, and scrollable table wrappers.
The skill is a guidance and review checklist. It does not change your files by itself based on the files provided, so you still decide and apply the edits.
How do you install the horizontal-scroll skill?
Download the ZIP for the skill from the directory page. Unzip it so the skill folder (containing SKILL.md and references/rule.md) sits in one of these locations: ~/.claude/skills/ for your personal use across projects, or .claude/skills/ inside a specific project if you want it only there.
If you use the Claude apps instead, open Settings, go to Capabilities, and upload the skill under Skills.
The skill lists no required tools, runs no scripts and uses no network access, so there is nothing else to set up.
- Personal install: ~/.claude/skills/horizontal-scroll/
- Project install: .claude/skills/horizontal-scroll/ inside your repository
- Claude apps: Settings → Capabilities → Skills, then upload the skill
How do you trigger the skill with a natural request?
The agent loads the skill when your request matches its description, so you do not need a special command. Ask in plain language about layout overflow, responsive design, or WCAG 2.1 reflow. Mention the files or components you want reviewed so the agent knows where to look.
Good triggers include asking for an audit of responsive design, a check for WCAG 2.1 Level AA compliance, or a test at 320px width and 400% zoom.
- Audit the CSS in src/styles for things that cause horizontal scrolling at 320px.
- Check this page for WCAG 2.1 reflow problems at 400% zoom.
- Review my card and header components for fixed pixel widths and unbreakable text.
- Find 100vw widths in our stylesheets and suggest fixes.
What fixes does the skill suggest?
The skill's fix guidance covers six patterns. Layout containers should use max-width with width: 100%, not a fixed px width. Images and media should get max-width: 100% and height: auto. Text containers that may hold long strings can use overflow-wrap: break-word, with word-wrap: break-word as a fallback. Full-width elements should use width: 100% instead of 100vw, because the scrollbar width can cause overflow. Multi-column layouts can use CSS Grid or Flexbox with flex-wrap: wrap. Data tables should sit inside a wrapper with overflow-x: auto, so the scroll happens on the table and not the page body.
- Fixed width: 1200px becomes max-width: 1200px with width: 100%
- Images, video, iframe and embed get max-width: 100%
- Long strings get overflow-wrap: break-word
- Full-width elements use width: 100% instead of 100vw
- Wide data tables get overflow-x: auto on their wrapper
.container {
max-width: 1200px;
width: 100%;
}
img, video, iframe, embed, object {
max-width: 100%;
height: auto;
}What are the exceptions and limits?
WCAG 2.1 SC 1.4.10 allows two-dimensional layouts for content that needs them, such as data tables, map interfaces and video. The skill notes these exceptions, but the agent may still over-flag them, so review its findings on those components yourself.
The skill also does not replace real testing. It only describes how to test and review code. Check results in a browser at 400% zoom and, where it matters, with a screen magnifier or other assistive technology.
- Not for native mobile apps or non-web interfaces, since the guidance targets CSS and browser layouts
- Data-heavy content such as tables or maps may be flagged even when two-dimensional scrolling is legitimate
What about safety, scripts and network access?
The skill runs no scripts and uses no network access, according to its listing. It reads the code you give it and returns review notes and suggested CSS. Because it does not edit files on its own, changes only happen when you or your agent apply them.
Review any suggested edit before you commit it, as you would with any code change.
What people use it for
- Auditing an existing marketing site for WCAG 2.1 Level AA reflow problems
- Finding fixed-pixel containers that overflow on narrow phones
- Replacing 100vw full-width elements that cause a sideways scrollbar
- Adding overflow-wrap to comment or article containers that hold long URLs
- Handing off a design spec with rules for high-zoom behaviour
Frequently asked questions
Is the horizontal-scroll skill free to use?
The skill is published under the MIT licence, as listed on the directory page. The source does not mention any price, so check the licence text in the download for the full terms.
What do I need to install it?
The listing states no requirements and no tools. You download the ZIP and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder, or upload it under Settings → Capabilities → Skills in the Claude apps.
Does the skill run scripts or use the internet?
No. The listing says it runs no scripts and uses no network access. It works from the code and text you provide.
Will the skill change my CSS files automatically?
No. It is a guidance and review checklist and does not change files by itself based on the files provided. You or your agent make any edits.
Does the skill replace testing with a screen magnifier?
No. It only describes how to test and review code. Test in a browser at 320px width and 400% zoom, and use assistive technology where it matters.
Does it work for native mobile apps?
No. It targets CSS and browser layouts, so the guidance does not apply to native mobile apps or non-web interfaces.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you build or audit responsive websites and want an agent to flag fixed widths, 100vw units, unbreakable text and images that cause sideways scrolling against WCAG 2.1 reflow. Pick something else if you work on native apps, need a tool that edits files automatically, or need legitimately two-dimensional content like data tables and maps checked without false positives.
Download the skill