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. Typography (text wrapping, font smoothing, tabular numbers, spacing) is covered by the `better-typography` skill; use that for anything text-related. ## Quick Reference | Category | When to Use | | --- | --- | | [Surfaces](surfaces.md) | Border radius, optical alignment, shadows, image outlines, hit areas | | [Animations](animations.md) | Interruptible animations, enter/exit transitions, icon animations, scale on press | | [Performance](performance.md) | Transition specificity, `will-change` usage | ## Core Principles ### 1. Concentric Border Radius Outer radius = inner radius + padding. Mismatched radii on nested elements is the most common thing that makes interfaces feel off. ### 2. Optical Over Geometric Alignment When geometric centering looks off, align optically. Buttons with icons, play triangles, and asymmetric icons all need manual adjustment. ### 3. Shadows Over Borders Layer multiple transparent `box-shadow` values for natural depth. Shadows adapt to any background; solid borders don't. ### 4. Interruptible Animations Use CSS transitions for interactive state changes: they can be interrupted mid-animation. Reserve keyframes for staged sequences that run once. ### 5. Split and Stagger Enter Animations Don't animate a sin