better-layout
Helps with grouping, alignment, reading order, progressive disclosure and other details that make a good layout.
Open source Repository Open in the app JSON README (API)
About
Helps with grouping, alignment, reading order, progressive disclosure and other details that make a good layout.
Details
- Kind
- Agent skills
- Topic
- No topic detected
- Publisher
- jakubkrehel
- Origin
- skillssh
- Category
- ferramentas
- Stars
- 6,048
- Forks
- 212
- Open pull requests
- 3
- Last push
- 2026-08-29T17:01:49Z
- Repository state
- ativo
- Language
- Markdown
- License
- MIT
- Added
- 2026-08-30 15:21:15
- Updated
- 2026-09-10 11:02:45
- Origin id
jakubkrehel/skills/better-layout
README
<a href="https://interfaces.dev/"> <img width="320" height="168" alt="interfaces.dev" src="https://ho1jr3x2dcwdu3t5.public.blob.vercel-storage.com/interfaces-og-image.png" /> </a> [](https://skills.sh/jakubkrehel/skills) A collection of agent skills that cover UI, typography, colors, accessibility, layout, product writing and help you build a great interface. These skills are contain topics that I write about on [my personal website](https://jakub.kr/) and my design engineering magazine, [Interfaces](https://interfaces.dev/). ## Skills that help build great interfaces - [**better-interface**](skills/better-interface/SKILL.md): Combines all of the `better-*` skills into a single review. - [**better-ui**](skills/better-ui/SKILL.md): Improves UI in your project across the board. Covers things like **concentric border radius**, **optical alignment**, **contextual icons**, **hit areas**, **animation** and more. - [**better-typography**](skills/better-typography/SKILL.md): Improves type in your project. Covers **type scale**, **spacing**, **sizing**, **variable fonts**, **OpenType features**, **wrapping**, **truncation** and more. - [**better-colors**](skills/better-colors/SKILL.md): Helps you build a color system and answer anything about color in your project. You can **generate palettes**, **use semantic tokens**, **convert between formats**, **check contrast** and more. - [**better-accessibility**](skills/better-accessibility/SKILL.md): Helps your project comply with accessibility standards and best practices. - [**better-layout**](skills/better-layout/SKILL.md): Helps with **grouping**, **alignment**, **reading order** and other details that make a great layout. - [**better-writing**](skills/better-writing/SKILL.md): Focuses on improving and product copy in your project and making it consistent. - [**interface-review**](skills/interface-review/SKILL.md): Reviews your work across multiple categories like **UI**, **typography**, **layout**, **color**, **writing** and **accessibility** and gives you a detailed analysis of the findings. User-invoked. - [**explain-interface**](skills/explain-interface/SKILL.md): Helps you figure out how an animation, design or a piece of UI was built on the web. User-invoked. - [**break**](skills/break/SKILL.md): Renders a component you choose in **every state and scenario** on a temporary page and stress tests it. User-invoked. - [**variant**](skills/variant/SKILL.md): Builds multiple **variants** of a component you're working on and helps you iterate. User-invoked. ## Install ```bash npx skills add jakubkrehel/skills ``` ## Claude Code plugin ```text /plugin marketplace add jakubkrehel/skills /plugin install interfaces@interfaces ```