What problem does it solve? Interfaces often feel sluggish or unpolished because of poor animation choices: wrong easing curves, excessive durations, scale-from-zero entrances, and non-interruptible keyframes. This Skill encodes Emil Kowalski's design engineering philosophy to help you review and build UI that feels right. ## Core Features & Use Cases - Animation Decision Framework: Decide whether an element should animate at all based on usage frequency, purpose, easing, and duration, with concrete rules like keeping UI animations under 300ms and never animating keyboard-initiated actions. - Structured UI Code Reviews: Get Before/After/Why markdown tables identifying issues like transition: all, ease-in on dropdowns, missing :active press states, and wrong transform-origin on popovers. - Implementation Guidance: Covers springs, clip-path animations, gesture velocity and damping, hardware acceleration pitfalls in Framer Motion, stagger timing, reduced-motion accessibility, and debugging animations in slow motion. - Use Case: Paste a dropdown or toast component and receive a table of concrete fixes, such as replacing scale(0) entries with scale(0.95) plus opacity, or switching Framer Motion x props to hardware-accelerated transform strings. ## Quick Start Ask the assistant to review my dropdown component's animation code and suggest improvements based on design engineering principles.
