What problem does it solve? UI animation work often suffers from two failure modes: motion added without purpose (AI-slop patterns like pulsing indicators and hover-scale-on-everything) and existing animations that lack systematic review. This Skill provides a structured, expert-grounded framework for both building purposeful motion and auditing existing animations against the published techniques of Emil Kowalski, Jakub Krehel, and Jhey Tompkins. ## Core Features & Use Cases - Create Mode: Build interactive components with purposeful motion, applying a frequency gate, context-weighted designer perspectives, and recipes from a motion cookbook covering enter/exit animations, springs, clip-path, and scroll-driven effects. - Audit Mode: Systematically review existing animation code, detect motion gaps (conditional renders without transitions), flag AI-slop patterns, and emit a branded self-contained HTML report with looping per-finding demo cards. - Context-Aware Weighting: Maps project types (SaaS dashboard, kids app, portfolio, e-commerce) to primary/secondary designer perspectives so rules like sub-300ms durations are applied only where appropriate. - Use Case: Ask it to audit a React app's Framer Motion code; it performs reconnaissance, proposes a designer weighting, checks the anti-checklist and accessibility requirements, then writes an HTML report to motion-audits/ and opens it in your browser. ## Quick Start Ask the agent to audit the animations in this project and produce a motion report, or ask it to build an animated component such as a toast notification with purposeful motion.
