What problem does it solve? UI code often ships with subtle animation and interaction flaws—sluggish easing, wrong transform origins, non-interruptible keyframes—that make interfaces feel unpolished. This Skill encodes Emil Kowalski's design engineering philosophy to review and improve UI code with concrete, opinionated fixes. ## Core Features & Use Cases - Structured UI Code Review: Produces Before/After/Why markdown tables identifying issues like transition: all, scale(0) entries, ease-in on UI elements, and missing :active press states. - Animation Decision Framework: Decides whether an element should animate at all based on usage frequency, then selects easing curves, durations (under 300ms for UI), and spring configurations. - Advanced CSS & Motion Techniques: Covers clip-path animations, gesture velocity-based dismissal, hardware-accelerated transforms, @starting-style entry animations, and reduced-motion accessibility. - Use Case: Paste a React dropdown component and receive a table of fixes: switching ease-in to a custom cubic-bezier(0.23, 1, 0.32, 1) ease-out, setting transform-origin to the trigger, and reducing duration from 400ms to 200ms. ## Quick Start Review my dropdown component's CSS animations and suggest improvements using the design engineering principles.
