Skill
Better Layout
Establish layout structure, spacing, and visual hierarchy
Install
https://github.com/jakubkrehel/skills/tree/main/skills/better-layout
Triggers on
When structuring page layouts, reviewing component spacing, or validating alignment across responsive breakpoints.
- Author
- jakubkrehel
Repositoryhttps://github.com/jakubkrehel/skills
Position and spacing establish interface hierarchy before any visual styling arrives. This skill constructs that structural framework, validating it across resizing, localization, and RTL conditions.
Highlights
- Spacing strategy: groups content hierarchically with consistent gaps (8px within groups, 16px between)
- Alignment discipline: maintains consistent edges to reduce visual noise
- Interactive element design: ensures controls are visually distinct from static content
- Progressive disclosure: validates hidden content has visible indicators for discovery
- Content flow: aligns layouts with natural reading patterns (top-to-bottom, leading-to-trailing)
Use when structuring pages, reviewing component layouts, or refining spacing across responsive breakpoints. Installs as an Agent Skill for Claude Code.
Similar skills
Better Typography
SkillWeb typography principles for readable, accessible type
Frontend & Design
Better Interface
SkillConsolidate multi-discipline UI reviews into ranked findings
Frontend & DesignCode Reviews
Site Architecture
SkillMap and organize website hierarchy, URLs, and navigation
Frontend & DesignMarketing & SEO
Comments(0)
Sign in to comment