Skip to content
Get packs

Better Layout

Makes layouts hold up when resized, translated or mirrored for RTL languages

Source Download skill
Repository
jakubkrehel/skills
Stars
10,236
Licence
MIT
Files
4 files

What it does

When installed, the agent reviews and writes UI layout code with rules for grouping with space, aligning to shared edges, using logical CSS properties so layouts mirror correctly for right-to-left languages, and leaving room for longer translated text. It also checks finished work by resizing, translating and mirroring the layout, and flags specific breakage patterns such as overflowing grid tracks, 100vw widths and clipped safe areas, with concrete CSS fixes.

Great for

  • Front-end developers building responsive web or app interfaces
  • Designers or developers preparing a product for translation or RTL languages
  • Teams reviewing layout code for overflow, clipping and mobile-viewport bugs

Skip it if

  • Projects with an established spacing scale or design system the skill would override: it says to use the project's tokens instead, but a poorly-scoped request could still cause churn
  • Non-layout work such as accessibility, colour, typography or copywriting, which the skill explicitly hands off to other skills

Try asking

  • “Review my CSS grid for overflow when translated labels get longer and fix it”
  • “Make this mobile settings screen work in Arabic with mirrored layout”
  • “Find places where I use 100vh or 100vw that break on mobile and replace them”
  • “Tighten the spacing and grouping on this card list so related items read as one group”
Step-by-step guide: how to use Better LayoutInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

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

    better-layout.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip better-layout.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip better-layout.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

  • Point the agent at your project's spacing tokens or design system so it uses them instead of the default starting values.
  • Ask for a pseudo-localization or German long-string test to surface clipping early.
  • Name the specific view or component so findings stay tied to a visible failure rather than general style preferences.

What's inside

  • agents/openai.yaml
  • grouping-and-alignment.md
  • SKILL.md
  • spacing-and-adaptivity.md

Redistributed unmodified from jakubkrehel/skills 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.