What problem does it solve? Interfaces often feel sluggish or unpolished because of subtle animation mistakes: wrong easing curves, excessive durations, scale-from-zero entrances, and non-interruptible keyframes. This Skill encodes Emil Kowalski's design engineering philosophy to review and fix UI code so interactions feel responsive and natural. ## 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 Code Review: Produces a mandatory Before/After/Why markdown table identifying issues like transition: all, ease-in on UI elements, missing :active press states, and incorrect transform-origin on popovers. - Component & Gesture Guidance: Covers buttons, tooltips, drawers, drag-to-dismiss with velocity thresholds, stagger animations, reduced-motion accessibility, and performance rules (transform/opacity only, hardware acceleration). - Use Case: Paste a React dropdown component and receive a table of fixes: replacing ease-in with a custom cubic-bezier(0.23, 1, 0.32, 1) ease-out, shortening duration to under 250ms, and setting transform-origin to the trigger. ## Quick Start Ask the assistant to review your UI component's animation code and list the issues in a Before/After table.
