better-uilisted

# 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) is covered by the `better-accessibility` skill. Layout structure (grouping, spacing between sections, breakpoints, spatial RTL) is covered by the `better-layout` skill. ## Quick Reference | Category | When to Use | | --- | --- | | [Surfaces](surfaces.md) | Border radius, optical alignment, shadows, image outlines | | [Animations](animations.md) | Interruptible animations, enter/exit transitions, icon animations, scale on press, motion restraint | | [Icons](icons.md) | Icon stroke weight, states via `currentColor`, outline vs fill, sizing, RTL flipping | | [Performance](performance.md) | Transition specificity, `will-chang