animation-motionlisted

# UI Animation & Motion — Emil Kowalski Design Philosophy ## Overview Taste is trained, not innate. Animation excellence compounds through study and practice—most users never consciously notice individual polish, yet the collection creates stunning results. Beauty is leverage: aesthetic excellence is competitive advantage. This skill applies Emil Kowalski's battle-tested animation decision framework to ship production-grade motion. --- ## When to Use This Skill **Use when:** - Designing animations for UI components (buttons, modals, dropdowns, popovers, tooltips) - Reviewing animation implementations for performance and accessibility - Deciding whether/how/how-fast to animate interactions - Building gesture-driven interfaces (drag, swipe, hold) - Optimizing motion for accessibility (prefers-reduced-motion) - Creating staggered or spring-based animations - Debugging animation timing, easing, or transform issues **Do NOT use for:** - Animation frameworks/libraries selection (use dedicated framework skills) - Keyframe animation software (Figma, After Effects) - SVG animation exclusively (this covers CSS/WAAPI) --- ## The Animation Decision Framework ### Question 1: Should This Animate at All? **Frequency is the primary gate:** | Frequency | Example | Decision | |-----------|---------|----------| | **100+ times/day** | Keyboard shortcuts, frequently toggled UI | ❌ Never animate | | **Tens of times/day** | Hover effects, toggle states | ⚠️ Remove or drastically reduce |