make-interfaces-feel-better

Apply small compounding details: use concentric border radii on nested elements, replace elevation borders with layered box-shadows, add subtle scale(0.96) press feedback on buttons, and use tabular-nums for dynamic numbers. Review motion at 10% speed to catch subtle issues.

Animate icons with opacity, scale (0.25 to 1), and blur (4px to 0px) instead of toggling visibility. Use motion or framer-motion with a spring transition (duration 0.3, bounce 0) if installed, otherwise cross-fade both icons in the DOM with CSS transitions.

Use CSS transitions for interactive state changes like hover, toggle, and open/close because they are interruptible mid-animation. Reserve keyframe animations for staged one-shot sequences like enter animations or loading states.

Yes, all principles include Tailwind-specific examples such as active:scale-[0.96], tabular-nums, text-balance, and transition-transform. The Skill adapts fixes to whatever styling system the project already uses without introducing a second one.

transition: all forces the browser to watch every property, causes unintended animations on properties like padding or colors, and blocks browser optimizations. Always specify exact properties such as transition-property: scale, opacity.

Skip custom animation on high-frequency interactions like row hovers or keystrokes; use instant feedback or a minimal opacity/color transition under 150ms. Motion must never be the only feedback channel, and reduced-motion preferences should be honored.