What problem does it solve? Frontend interfaces often feel sluggish or unpolished because of poor animation choices: wrong easing curves, excessive durations, scale-from-zero entrances, and non-interruptible keyframes. This Skill provides concrete design engineering rules, inspired by Emil Kowalski's craft philosophy, to review and build UI motion that feels responsive and intentional. ## 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 and duration (UI animations under 300ms, custom cubic-bezier curves). - Structured UI Code Review: Produces a mandatory Before/After/Why markdown table flagging issues like transition: all, ease-in on UI elements, scale(0) entries, and missing :active press states. - Component Craft Guidance: Covers springs, popover transform-origins, tooltip delay skipping, clip-path reveals, drag gestures with velocity-based dismissal, and performance rules (transform/opacity only, hardware acceleration caveats in Framer Motion). - Use Case: When reviewing a React dropdown component, the Skill flags a 400ms ease-in transition and recommends a 200ms custom ease-out curve with origin-aware scaling, explaining the perceived-performance reasoning. ## Quick Start Ask the assistant to review your React or CSS component's animations and interaction states using the design engineering review checklist.
