🎨 Design

better-layout

Name: better-layout
Author: jakubkrehel

by jakubkrehel15 days ago3.2k

Layout structure for web interfaces, from grouping and alignment to reading order, progressive disclosure, and adaptive breakpoints. Use when structuring a page or component, spacing or aligning controls, deciding what collapses at small sizes, handling RTL layout direction, or reviewing frontend code for layout. Triggers on layout, spacing, alignment, grouping, negative space, whitespace, visual hierarchy, reading order, progressive disclosure, breakpoints, responsive layout, container queries, safe area, full-bleed, edge-to-edge, layout margins, RTL layout, logical properties.

Install

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

Show step-by-step

1
Open your terminal
- Mac: Press ⌘ Space, type "Terminal", press Enter
- Windows: Press Win R, type "cmd", press Enter
2
Paste the command above and press Enter
Use the Copy command button, then paste in your terminal (Mac: ⌘V, Windows: Ctrl V).
3
Restart Claude Code
Close and reopen Claude Code, or start a new session, so it picks up the new skill.

Where it lives

~/.claude/skills/jakubkrehel--skills--skills--better-layout/
├── SKILL.md
└── ... (skill resource files)

View on GitHub

Comments

X@jakubkrehel

"I’ve added 4 new skills to the /better collection. /better-accessibility Finds accessibility issues and helps fix them. /better-layout Improves layout,..."

X@jakubkrehel

"I’ve added 4 new skills to the /better collection. /better-accessibility Finds accessibility issues and helps fix them. /better-layout Improves layout,..."