better-ui
Details that make interfaces feel better
Great interfaces rarely come from a single thing. It's usually a collection of small details that compound into a great experience. Apply these principles when building or reviewing UI code.
When reviewing, slow the interface down: replay motion at 10% speed in the browser's Animations panel and walk every state: hover, focus, active, loading, empty. What feels off at 10% speed is what's subtly wrong at full speed.
Preserve the project's component library, tokens, and density. Match its established motion language except where a principle below prescribes an exact interaction pattern.
Typography (text wrapping, font rendering, tabular numbers, spacing) is covered by the better-typography skill; use that for anything text-related. Accessibility (hit areas, focus states, keyboard support, ARIA, reduced-motion requirements) is covered by the better-accessibility skill. Layout structure (grouping, spacing between sections, breakpoints, spatial RTL including icon mirroring) is covered by the better-layout skill. When any of those skills is unavailable, do not stop: apply the project's own tokens and component conventions, fall back to platform defaults where it has none, and record which domain went uncovered so the gap is visible.
The principles below give exact component-level recipes and are self-sufficient. For the project's broader motion vocabulary — easing-curve selection, duration scales, and spring physics reasoning — the emil-design-eng skill goes deeper if it is installed; prefer it when choosing a curve, and use the values here when implementing the specific patterns named below. If it is not available, the values here stand on their own.