fixing-motion-performance
Installation
Summary
Audit and fix animation performance issues including layout thrashing, compositor properties, and scroll-linked motion.
- Covers nine rule categories by priority: never patterns, mechanism selection, measurement batching, scroll-linked motion, paint optimization, layer promotion, blur/filter constraints, view transitions, and tool boundaries
- Provides file-level review mode that identifies violations with exact line quotes, impact explanation, and concrete code fixes
- Includes FLIP-style transition patterns, scroll timeline alternatives to JS polling, and guidance on batching DOM reads before writes
- Applies constraints within existing animation stacks without forcing library migrations
SKILL.md
fixing-motion-performance
Fix animation performance issues.
how to use
-
/fixing-motion-performanceApply these constraints to any UI animation work in this conversation. -
/fixing-motion-performance <file>Review the file against all rules below and report:- violations (quote the exact line or snippet)
- why it matters (one short sentence)
- a concrete fix (code-level suggestion)
Do not migrate animation libraries unless explicitly requested. Apply rules within the existing stack.