ui-ux-design-best-practiceslisted

# UI/UX Design Best Practices Guidelines for building interfaces where every interaction detail compounds into something that feels right. Covers animation decisions, Tailwind v4 motion utilities, component interaction patterns, and accessibility requirements. ## When to Apply Load this skill when: - Writing or reviewing components with hover, active, focus, or enter/exit animations - Implementing transitions, transforms, or keyframe animations (CSS or Tailwind) - Reviewing Tailwind utility usage for motion-related classes - Designing interactive elements: buttons, dropdowns, modals, drawers, tooltips, popovers - Checking accessibility for motion sensitivity (`prefers-reduced-motion`) - Implementing gesture or drag interactions - Debugging janky or sluggish animations ## Reference Documentation ### Animation - `rules/animation-decision-framework.md` - core philosophy, should-animate decision tree, easing selection, duration cheatsheet, perceived performance - `rules/animation-springs.md` - spring config (Framer Motion / Motion), mouse interactions, interruptibility advantage - `rules/animation-component-patterns.md` - buttons, scale(0) rule, origin-aware popovers, tooltip instant-on-subsequent, blur crossfades - `rules/animation-transitions-transforms.md` - CSS transitions vs keyframes, `@starting-style`, translateY percentages, scale children, GPU acceleration - `rules/animation-clip-path.md` - `inset()` shape, hold-to-delete/confirm pattern, tab color transitions, scr