What is the better-layout skill?
The better-layout skill is one folder in Jakub Krehel's skills repo. It decides how a screen groups, aligns and orders its content, then breaks that structure on purpose by resizing it, translating it and mirroring it for RTL. A finding needs a failure you can show, such as a clip or an overlap.
Better-layout describes a layout as a set of decisions about groups, shared edges and order, and then attacks it. The structure has to survive a narrow window, a long German label and a right to left mirror.
The rule for reporting is strict. A value that differs from the skill's starting numbers is not a finding. A clip, an overlap, a broken mirror or a misread group is.
Principles it applies
- Group with space first, background shapes second and separator lines last. The gap between groups is at least double the gap inside one.
- Align to a small set of shared edges, with one spacing step per level of nesting.
- Write mirrored layout with logical properties such as margin-inline-start and text-align: start.
- Keep visual order equal to DOM order, with one primary action per view.
Stress tests
Translated strings grow, and short ones grow proportionally more, so a one word button is the riskiest thing on the screen. The skill sizes text boxes with max-width and min-height and tests with pseudo-localization and one long string locale.
Where it fits and where it does not
Best for
- Pages that must hold up in several languages or in RTL.
- Responsive work where breakpoints should follow the content instead of device presets.
- Code review hunting for 100vw, fixed heights on text and physical left and right values.
Not for
- Hit areas and focus behavior, which belong to better-accessibility.
- Radius, shadows and animation, which belong to better-ui.
- Line length and truncation mechanics, which belong to better-typography. Related: layout and flutter-build-responsive-layout.
Use it with UiChemy
Check the structure of the screen your agent drafted, including a long label and a narrow width, before it leaves the design stage. Then bring it into WordPress with UiChemy Figma to WordPress or Composer. Get Started on uichemy.com.
How to install Better Layout Skill: Grouping, Alignment and RTL Checks
git clone https://github.com/jakubkrehel/skills.gitClone the repository
Run
git clone https://github.com/jakubkrehel/skills.git. The skill lives in skills/better-layout.Copy the folder with its references
Copy skills/better-layout into the place your agent loads skills from. Keep grouping-and-alignment.md and spacing-and-adaptivity.md beside SKILL.md, since the skill links to both.
Plugin route for Claude Code
Run
/plugin marketplace add jakubkrehel/skillsand then/plugin install interfaces@interfaces, as the README documents.Ask for a layout pass
Name a screen and ask for a layout review. Say whether you want edits or a report, because a review request alone changes no files.
Check that it loaded
Ask it to review one screen. The reply should group findings by principle, give each row a path and line, and end with Block or Approve with unrun checks marked Not verified.
Key features
- Space before linesGroups are shown with space, then background shapes, then separator lines only where space cannot carry the structure. Gaps between groups run at least double the gaps within them.
- Distinct controlsEvery interactive element gets a background shape, a border, an underline or a consistent placement zone, so a control never looks like the static text next to it.
- Shared alignment edgesThe skill picks a few alignment edges and puts everything on them, using one spacing step per nesting level, with 16px as a useful default.
- Logical properties for mirroringDirection dependent layout uses leading and trailing values, so margin-inline-start and inset-inline-start replace physical left and right outside safe-area geometry.
- Reading order equals source orderImportant content sits near the top and the leading edge, and visual order matches DOM order. Using order, row-reverse or grid placement to reshuffle content is flagged.
- Cues for hidden contentOff-screen or collapsed content needs a visible cue, such as the next item peeking 16 to 32px past the scroll edge or a disclosure control.
- Edge and safe-area rulesBackgrounds and media bleed to the viewport edge while controls and text stay inside the margins. Content scrolls under sticky chrome with scroll-padding-block-start set.
- Content driven breakpointsThe expanded layout holds until it stops fitting. Container queries handle component level adaptation, and the smallest and largest supported sizes get tested first.
- Growth and clipping planText containers use max-width and min-height, rows wrap, and a critical action never sits where zoom, resizing or scrolling could clip it.
- Detection tableA before you finish table maps patterns such as width: 100vw, height: 100vh and a sticky header without scroll padding to their fixes.
Frequently asked questions
What does the better-layout skill do?
It handles grouping, alignment, reading order and responsive structure in Jakub Krehel's skills repository, then stress tests the structure by resizing it, translating it and mirroring it for RTL. It writes fixes in your project's own styling system and spacing scale.
How do I install better-layout?
Clone jakubkrehel/skills and copy skills/better-layout with its two reference files into your agent's skills folder. In Claude Code you can run the plugin marketplace add and plugin install commands from the README instead. Then ask for a layout review of a named screen.
What counts as a layout finding?
A failure you can show: a clip, an overlap, a broken mirror or a misread group. A value that merely differs from the skill's starting numbers is not one, and where your project has a spacing scale or density system, its tokens win over the skill's defaults.
Why does it test with translated text?
Translated strings grow, and short ones grow proportionally more, so a one word button label is the riskiest element. The skill recommends pseudo-localization plus one long string locale such as German, and sizing text containers with max-width and min-height rather than a fixed width.
How does it handle right to left languages?
It writes direction dependent layout with logical properties such as margin-inline-start and text-align: start, and keeps physical left and right for geometry like safe-area insets. For translateX and background-position, which have no logical form, it adds a dir rtl override.
Which AI coding agents can use better-layout?
The README documents a Claude Code plugin install, and the skill folder includes an agents/openai.yaml file. For other agents, copy the folder to their skills location. The README lists no other agents, so confirm yours reads SKILL.md folders first.
Where do hit areas and truncation belong?
Not here. Hit areas and focus belong to better-accessibility, radius, shadows and animation to better-ui, and truncation mechanics to better-typography. Better-layout only requires that a truncated value the user needs has a keyboard reachable way to the full text. Related: web-design-guidelines.