What problem does it solve? UI animation work often suffers from inconsistent quality: AI-generated interfaces ship with repetitive motion patterns (pulsing indicators, blur-everywhere entrances, hover-scale on everything), missing reduced-motion support, and animations that ignore how frequently users trigger them. This Skill provides a structured framework for both building purposeful motion and auditing existing animations against expert design principles. ## Core Features & Use Cases - Create Mode: Builds interactive components with purposeful motion in React, Framer Motion, CSS, or HTML, applying a frequency gate (rare vs. daily vs. 100s/day interactions), context-appropriate durations, custom easing, and mandatory prefers-reduced-motion handling. - Audit Mode: Reviews existing animation code, detects motion gaps (conditional renders without AnimatePresence), flags AI-slop motion patterns with frequency heuristics, and emits a branded self-contained HTML report with looping per-finding demo cards. - Three Designer Lenses: Weights perspectives from Emil Kowalski (restraint and speed), Jakub Krehel (production polish), and Jhey Tompkins (playful experimentation) based on project type — productivity tools, kids apps, SaaS dashboards, portfolios, and more. - Use Case: Ask it to audit a Next.js dashboard's animations; it performs context reconnaissance, proposes a designer weighting for your confirmation, then produces an HTML report classifying findings as Critical, Important, or Opportunities with looping visual demos of the recommended fixes. ## Quick Start Ask the assistant to audit the animations in your current project, or to build a specific animated component such as a notification toast with Framer Motion.
