What problem does it solve? UI code often ships with subtle animation mistakes—ease-in curves, scale(0) entrances, transition: all, missing press feedback—that compound into interfaces feeling sluggish and unpolished. This Skill applies Emil Kowalski's design engineering philosophy to catch and fix those details. ## Core Features & Use Cases - Animation Decision Framework: Determines whether an element should animate at all, which easing curve to use, and how long it should run based on interaction frequency and purpose. - Structured UI Review: Audits UI code against a checklist (transition: all, ease-in usage, transform-origin on popovers, keyboard-triggered animations) and outputs a Before/After/Why markdown table. - Component Interaction Patterns: Provides concrete CSS and Motion recipes for buttons, popovers, tooltips, drawers, toasts, drag gestures, springs, clip-path reveals, and stagger animations. - Use Case: Paste a React dropdown component and receive a table of fixes—switching ease-in to a custom ease-out curve, setting transform-origin to the trigger, and reducing duration to under 250ms. ## Quick Start Ask the assistant to review your UI component's animation code and suggest improvements based on design engineering principles.
