Guide · Agent skill
How to use the Better Layout agent skill: install and examples
Updated · written with AI from the project's own documentation and checked against our catalogue data
The better-layout skill is a set of instructions that teaches an AI agent how to write and review UI layout code. It covers grouping, alignment, reading order, responsive structure, and room for translated text, so a layout keeps working when it is resized, translated or mirrored. This guide explains what the skill changes, how to install it, how to trigger it, and what to check before you rely on it.
Better Layoutjakubkrehel/skills · MIT Download the skill Quick start
- 1Download the ZIP. Download the better-layout ZIP from this page.
- 2Unzip the skill folder. Unzip the file so the better-layout folder contains SKILL.md and its related files.
- 3Choose a location. Place the folder in ~/.claude/skills/ for personal use, or in the project's .claude/skills/ folder.
- 4Or upload it in the Claude apps. Alternatively, upload the skill under Settings → Capabilities → Skills.
- 5Make a layout request. Describe the component and the risk, such as overflow, RTL or translation.
- 6Review the findings. Check the agent's findings and fixes, grouped by principle and ordered by severity.
What is an agent skill, and what does better-layout make the agent do?
An agent skill is a folder containing a SKILL.md file with instructions the agent loads when a task matches the skill's description. The better-layout skill's description is: sets grouping, alignment, reading order, responsive structure and room for translated text, so a layout holds up when it is resized, translated or mirrored.
With the skill installed, the agent writes and reviews layout code using specific rules. It groups related items with space before using background shapes or separator lines. It aligns content to a small set of shared edges. For direction-dependent layout it uses logical CSS properties such as margin-inline-start and text-align: start, so layouts mirror correctly for right-to-left languages. It also leaves room for longer translated strings.
- Groups with space first, then background shapes, then separator lines only where needed
- Keeps interactive elements visually distinct from static content
- Uses logical properties for anything that mirrors
- Puts the most important content at the top and leading edge
- Checks finished work by resizing, translating and mirroring the layout
Install the better-layout skill
The skill is published as a folder, and you can add it in one of two ways. Download the ZIP from this page and unzip it. Then either place the folder in your personal skills directory, ~/.claude/skills/, or in a project's .claude/skills/ directory so it applies only to that project.
Alternatively, you can upload the skill in the Claude apps under Settings → Capabilities → Skills.
- Personal: unzip into ~/.claude/skills/ so it is available across your projects
- Project only: unzip into the project's .claude/skills/ folder
- Claude apps: upload the skill under Settings → Capabilities → Skills
Trigger the skill with natural requests
You do not need a special command. Describe the layout task in plain language and mention what matters, such as responsiveness, translation or RTL support. The agent loads the skill when the request matches its description.
Good requests name the component and the risk. Vague requests such as make it look better are less likely to produce the layout checks this skill is built for.
- Review this settings page layout for overflow and clipping on mobile.
- Make this checkout form work in Arabic and Hebrew, mirrored for RTL.
- Check this card grid for breakage at 320px width and 200% zoom.
- Prepare this product screen for German translation without clipping the buttons.
Example: fixing common layout breakage
The skill includes a detection table for common bugs and their fixes. For example, a grid track that overflows because of long text can be fixed by changing the track to minmax(0, 1fr). A full-width element sized with 100vw can be changed to width: 100%, because 100vw includes the scrollbar and causes horizontal scrolling on desktop.
Other patterns it flags include height: 100vh on a full-height mobile pane, which should use 100dvh, and @media queries inside reusable components, which should use @container on the component's parent.
- grid-template-columns with 1fr overflowing its track: use minmax(0, 1fr) on the track and min-width: 0 on the flex child
- width: 100vw: use width: 100%
- height: 100vh on a mobile pane: use 100dvh
- float: left on mirrored UI: use float: inline-start
grid-template-columns: repeat(2, minmax(0, 1fr));What the skill needs, and what it does to your project
The skill lists no requirements. It does not run scripts and does not use the network. Its files are agents/openai.yaml, grouping-and-alignment.md, SKILL.md and spacing-and-adaptivity.md.
The skill tells the agent to write every fix in the project's styling system. If the project already has a spacing scale or density system, the agent should use its tokens. The starting values for spacing, such as 8px within a group and 16px as a useful default for nesting, apply only where no such system exists. Because the skill does not own accessibility, colour, typography or copywriting, it hands those to other skills rather than making changes itself.
- Requirements: none listed
- Runs scripts: no
- Uses network: no
- Licence: MIT
Safety notes and tips for good results
Because the skill runs no scripts and makes no network calls, its risk is in the code changes it suggests, not in what it executes. Review layout edits before merging, especially changes to spacing or breakpoints in a project that already has a design system. The skill itself warns that a poorly scoped request can cause churn in such projects.
For best results, scope the request to one component or view, and state whether the project has an existing spacing scale. Ask for a report if you want findings grouped by principle and ordered by severity. Test the smallest and largest supported sizes first, and check the RTL mirror in a real browser when you can.
- Scope requests to one component or view to limit churn
- Tell the agent about existing tokens or a spacing scale
- Ask for verification in a browser; without one, unchecked items are reported as Not verified
- Use it for layout only; accessibility, colour, typography and copy belong to other skills
What people use it for
- Finding grid and flex overflow caused by long text or wide tables
- Replacing 100vw and 100vh widths with safer viewport units
- Preparing a settings or checkout screen for right-to-left languages
- Checking a product screen for clipping when labels grow in translation
- Reviewing a component library for breakpoints that should be container queries
Frequently asked questions
How do I install the better-layout skill?
Download the ZIP from this page and unzip it. Place the folder in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings → Capabilities → Skills.
Does better-layout require anything else to run?
The skill lists no requirements. It does not run scripts and does not use the network, according to its listing.
Is better-layout free to use?
It is released under the MIT licence. The source does not list pricing, so check the licence text for terms.
Will the skill change my spacing values?
Only if the project has no spacing scale or density system. Where one exists, the skill says to use the project's tokens instead of its starting values.
Does better-layout handle accessibility or colour?
No. It hands hit areas and focus behaviour to better-accessibility, colour to better-colors, and typography and writing to better-typography and better-writing.
How do I check that the agent's layout fixes work?
Ask the agent to verify in a browser at every supported width, at 320px and 200% zoom, and in the RTL mirror. Any check it cannot run is reported as Not verified.
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 better-layout if you build responsive web or app interfaces, or need to prepare a product for translation or right-to-left languages, and want an agent that checks for overflow, clipping and mobile viewport bugs. Pick something else if your project already has a strict design system you want untouched, or if your task is mainly accessibility, colour, typography or copywriting.
Download the skill