fixing-motion-performance
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
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.
when to apply
More from ibelick/ui-skills
baseline-ui
Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.
11.2Kfixing-accessibility
Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.
11.0Kfixing-metadata
>
10.3Kui-skills
Opinionated constraints for building better interfaces with agents.
22