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 so you can systematically review and build UI that feels responsive and refined. ## Core Features & Use Cases - Animation Decision Framework: Decide whether an element should animate at all, which easing curve to use, and how long it should run based on usage frequency and purpose. - Structured UI Review: Produces Before/After/Why markdown tables flagging issues like transition: all, ease-in on UI elements, missing :active states, and incorrect transform-origin on popovers. - Implementation Guidance: Covers springs, clip-path animations, gesture velocity thresholds, hardware acceleration with Framer Motion, stagger delays, and reduced-motion accessibility. - Use Case: Paste a dropdown component's CSS and receive a table of concrete fixes, such as replacing transition: all 300ms with transition: transform 200ms ease-out and a custom cubic-bezier curve. ## Quick Start Ask the assistant to review your UI component's animation code and suggest improvements based on design engineering principles.
