What problem does it solve? UI animations often stutter or jank because they trigger expensive layout and paint work, interleave DOM reads and writes, or poll scroll position. This Skill provides a prioritized rule set to audit animation code and apply concrete fixes that keep motion on the compositor. ## Core Features & Use Cases - Prioritized Rule Categories: Nine ranked categories covering never patterns, mechanism choice, measurement batching, scroll handling, paint, layers, blur and filters, view transitions, and tool boundaries. - File Review Mode: Review a specific file against all rules and report violations with the exact snippet, why it matters, and a code-level fix. - Concrete Fix Patterns: Includes before-and-after examples such as animating transform instead of width, using scroll-timeline instead of scroll listeners, and FLIP-style measurement batching. - Use Case: When a dropdown transition feels janky, run the review on the component to discover it animates width (triggering layout) and get a transform-based replacement that runs on the compositor. ## Quick Start Ask the assistant to review your animation file with the fixing-motion-performance rules, for example by saying: review my Header.tsx animation code for performance violations and suggest fixes.
