What problem does it solve? Interfaces often feel sluggish or unpolished because of subtle animation mistakes: wrong easing curves, excessive durations, non-interruptible keyframes, and transforms that ignore trigger origins. This Skill applies Emil Kowalski's design engineering philosophy to diagnose and fix those details in UI code. ## Core Features & Use Cases - Animation Decision Framework: Determines whether an element should animate at all based on usage frequency, then selects the correct easing curve, duration, and technique (CSS transitions, springs, WAAPI). - Structured UI Review: Produces a mandatory Before/After/Why markdown table covering issues like transition: all, scale(0) entries, ease-in on UI elements, and missing :active press states. - Component & Gesture Guidance: Covers popover transform-origins, tooltip delay skipping, clip-path reveals, momentum-based drag dismissal, spring configuration, and hardware-acceleration pitfalls in Framer Motion. - Use Case: Paste a React dropdown component and receive a table of concrete fixes, such as replacing a 400ms ease-in transition with a 180ms custom ease-out curve and origin-aware scaling. ## Quick Start Review this dropdown component's animation code and suggest improvements to its easing, duration, and transform origin.
