Description
better-ui is an agent skill that polishes the visual details of an interface: surfaces, icons and motion. It gives the exact value to use for each detail, so an agent works from numbers rather than rough guesses. Examples include the rule that an outer corner radius equals the inner radius plus the padding plus any border width, when nested surfaces share an even inset; the cubic-bezier easing curves for motion; and optical nudges for icons, such as giving a button less padding on its icon side or shifting a play triangle toward its point. The skill applies only once the underlying interaction works, and it keeps the project's own component library, tokens and motion language wherever no rule gives a value. Text wrapping, typography, accessibility, layout and color contrast are handled by separate better-named skills. It is published by Jakub Krehel in the skills repository and has passed the Gen Agent Trust Hub, Socket and Snyk checks. The skill is installed with the skills command in a compatible agent, and it is meant for reviewing and refining a project's interface, not for building one from scratch.…
Highlights
- Exact radius rule for nested surfaces
- Motion easing values and icon states
- Optical alignment recipes for icons
- Defers typography, accessibility and color to other skills
Ratings & Reviews
No ratings yet
Be the first to rate better-ui.
People also visit
emilkowalski-motion
Motion-design follow-up skill inspired by Emil Kowalski's animation guidance
fixing-motion-performance
Audit and fix animation performance issues including layout thrashing
canvas-design
Design beautiful visual art in .png and .pdf formats using design philosophies
better-ui FAQ
What does better-ui do?
It polishes the surfaces, icons and motion of a project with exact values for border radius, optical alignment, shadows, icon states and animation.
Does it change my interface?
It guides the agent that edits the project. It does not hold any code itself, and it should be applied once the interaction already works.
How does the radius rule work?
When nested surfaces share an even visible inset, the outer radius equals the inner radius plus the padding plus any border width. Above 24px of padding, the layers are treated as separate surfaces.
Which skills cover the rest?
Typography goes to better-typography, accessibility to better-accessibility, layout to better-layout, and color tokens and contrast to better-colors.
How do I install it?
Run: npx skills add https://github.com/jakubkrehel/skills --skill better-ui
What security audits has it passed?
Gen Agent Trust Hub, Socket and Snyk all passed.
What are the best better-ui alternatives?
Popular alternatives to better-ui include redesign-existing-projects, emilkowalski-motion and better-typography. See all better-ui alternatives