make-interfaces-feel-better

Audit small compounding details: concentric border radii on nested elements, optical alignment of icons, subtle press feedback with scale(0.96), tabular numbers for dynamic values, and interruptible CSS transitions. A structured review across typography, surfaces, animations, icons, and performance surfaces these issues systematically.

Animate icons with opacity, scale (0.25 to 1), and blur (4px to 0) instead of toggling visibility. With Motion or Framer Motion use AnimatePresence with a spring transition and bounce 0; without a motion library, keep both icons in the DOM and cross-fade with CSS transitions.

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

Yes, every fix pattern includes Tailwind equivalents such as active:scale-[0.96], tabular-nums, text-balance, and transition-transform. The Skill first identifies the project's existing styling system and expresses changes in that system rather than introducing a new one.

transition: all forces the browser to watch every property, causing unintended animations on colors, padding, or shadows and blocking optimizations. Always specify exact properties like transition-property: scale, opacity, and use will-change only for transform, opacity, or filter when first-frame stutter appears.

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 remove unnecessary movement while keeping static cues.