better-layout Skill: Layouts That Survive Resizing, Translation and RTL

Makes your coding assistant fix grouping, alignment and responsive structure, then stress-test it for resizing, translation and RTL.

Installs: 33.4K; on skills.sh
Stars: 10K; on GitHub
Files: 3; besides SKILL.md
Updated: Oct 2026; last repo commit

better-layout sets how a screen is grouped, aligned, spaced and ordered, then tests it by resizing, translating and mirroring it for right-to-left languages. It writes fixes in your project's own styling system and only uses its fallback numbers where the project has no spacing scale.

It reviews code and reports findings as a table with a severity, a location and a before and after. The report ends with Block or Approve.

Good for

Front-end developers who want layouts that hold up on small screens and at 200% zoom
Teams shipping in several languages, including right-to-left ones
Designers and engineers reviewing spacing, alignment and reading order

Install better-layout

Claude Code

Copy this prompt.

Install the better-layout skill in Claude Code. Run this command:

npx skills add https://github.com/jakubkrehel/skills --skill better-layout

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Sets grouping, alignment, reading order, responsive structure and room for translated text, so a layout holds up when it is resized, translated or mirrored.

Sections in SKILL.md

Group with space, not lines
Keep controls distinct from content
Align to shared edges
Logical properties for anything that mirrors
Order by importance
One primary action per view
Hint at hidden content
Borderless controls need more clearance
Inset buttons from the edges
Content bleeds, controls float
Hold structure until it breaks
Plan for growth and clipping
Before you finish
Reporting

Key facts

Author: jakubkrehel (the README ties the skills to interfaces.dev and jakub.kr)
Repo: jakubkrehel/skills
Installs on skills.sh: 33,399 as of 2026-11-02
GitHub stars: 10,003 for the whole jakubkrehel/skills repo, 2026-11-02
License: MIT (LICENSE file)
Last commit to the repo: 2026-10-25
What is inside: 4 files including SKILL.md: 2 guides (grouping-and-alignment.md, spacing-and-adaptivity.md) and agents/openai.yaml
Related skills: better-accessibility, better-ui, better-typography, better-writing and better-colors own the topics this skill hands off
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass (2026-11-02)

What it includes

Space first, shapes second, separators last
The gap between groups is at least 2x the gap inside one, so 8px inside means 16px or more between.
Try: “Review the layout of this settings page and fix grouping and alignment.”
Write · Group with space, not lines
Controls must not look like static text
Every interactive element gets a background shape, border, underline or a consistent zone such as a toolbar.
Write · Keep controls distinct
A small set of alignment edges
One spacing step per nesting level, with 16px as a default where the project has no scale.
Write · Align to shared edges
margin-inline-start instead of margin-left
Leading and trailing properties for anything that mirrors. Physical left and right stay for safe-area insets.
Write · Logical properties
Important content near the top and leading edge
Visual order must match DOM order, so no order, row-reverse or grid placement that moves content out of sequence.
Read · Order by importance
One main button; menus after three secondary actions
Prefers a short view that links deeper over one long view.
Write · One primary action per view
Every off-screen or collapsed item gets a cue
Let the next item peek 16 to 32px past the scroll edge or show a disclosure control. Truncated values need a keyboard-reachable way to the full text.
Write · Hint at hidden content
Space between controls and from screen edges
Start with 12px between bordered controls, 24px between borderless text and icon controls, and about 16px inline inset for full-width buttons on mobile.
Write · Clearance and insets
Backgrounds go edge to edge; controls stay inside margins
Mentions safe-area insets, viewport-fit=cover and scroll-padding-block-start for sticky headers.
Write · Content bleeds, controls float
Breakpoints from content, container queries first
Test the smallest and largest supported sizes first.
Write · Hold structure until it breaks
Room for translated text
Use max-width and min-height, let rows wrap, and test with pseudo-localization and a long-string locale such as German.
Write · Plan for growth and clipping
An 11-row table of code patterns and their fixes
Examples: 100vw to 100%, 100vh to 100dvh, fixed height to min-height, @media in a component to @container, float: left to float: inline-start.
Write · Before you finish
Severity table ending in Block or Approve
HIGH blocks content or an action. Clipping at 320px width or 200% zoom is always HIGH. Anything not checked is reported as Not verified.
Read · Reporting

From the official docs

Questions

What does better-layout do?

It makes your assistant review and fix grouping, alignment, reading order and responsive structure. It then checks that the layout still works when resized, translated and mirrored for right-to-left.

How do I install better-layout?

Use the install box at the top of this page. The repo holds 14 skills, so the single-skill command is enough. The README also describes a Claude Code plugin named interfaces.

Does it need the other better-* skills?

No, but it hands off to them. Hit areas and focus go to better-accessibility. Radius, shadows and animation go to better-ui. Text spacing and truncation go to better-typography, and the words go to better-writing. Install them if you want those parts covered.

Is better-layout safe to use?

It is a set of instructions with two guides and bundles no scripts. It tells the assistant to write fixes in your project's styling system, so review the diff like any other code change.

Does it need a browser?

No. Without a browser it checks logical properties, queries and DOM order in the code. With one it checks every supported width, 320px, 200% zoom and the RTL mirror. It reports any check it could not run as Not verified.

What does its report look like?

A table of findings with severity, location (path:line), before, after and why, grouped by the principle each one breaks. It ends with Block if any HIGH remains, otherwise Approve.

Information

updated Nov 2, 2026

Repository: jakubkrehel/skills
Folder: skills/better-layout

jakubkrehel/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2

better-layout SKILL.md · github.com
jakubkrehel/skills README · github.com