better-ui
Refines surfaces, icons and feedback in an already defined UI.
- Status
- Observed
- Last reviewed
- 2026-10-10
ID: better-ui.
What it does
Checks how corners fit together, optical alignment, shadows, borders and icon consistency. Examines interaction states and transitions, favoring interruptible effects, specific properties and restrained motion. Preserves product components, tokens and density. When motion matters, observes it slowed down as well to detect defects hidden at normal speed.
When to use it
Use it for concrete refinement of an established direction: buttons that respond poorly, inconsistent icons, unclear surfaces or abrupt transitions. A new visual direction or flow review requires a separate design assignment.
How to use it
Ask for it by name, or invoke it with /better-ui in Claude Code or $better-ui in Codex. Specify components, states and the observable defect. Request bounded corrections and before/after comparisons. Have hover, focus, pressed, loading and empty states checked only where they exist in the assigned surface.
What it delivers
- Findings on visual details and states
- Corrections or proposals with concrete values
- Checks and remaining defects
Example
Refine the toolbar buttons and menus while preserving the current direction: check icons, press feedback and menu opening.
Executable instructions
The skill is installed from the source maintained by jakubkrehel; its license applies.
In the workflow
Use the router to choose this capability based on the required outcome.