fixing-motion-performance

1# fixing-motion-performance
2 
3Fix animation performance issues.
4 
5## how to use
6 
7- `/fixing-motion-performance`
8  Apply these constraints to any UI animation work in this conversation.
9 
10- `/fixing-motion-performance <file>`
11  Review the file against all rules below and report:
12  - violations (quote the exact line or snippet)
13  - why it matters (one short sentence)
14  - a concrete fix (code-level suggestion)
15 
16Do not migrate animation libraries unless explicitly requested. Apply rules within the existing stack.
17 
18## when to apply
19 
20Reference these guidelines when:
21- adding or changing UI animations (CSS, WAAPI, Motion, rAF, GSAP)
22- refactoring janky interactions or transitions
23- implementing scroll-linked motion or reveal-on-scroll
24- animating layout, filters, masks, gradients, or CSS variables
25- reviewing components that use will-change, transforms, or measurement
26 
27## rendering steps glossary
28 
29- composite: transform, opacity
30- paint: color, borders, gradients, masks, images, filters
31- layout: size, position, flow, grid, flex
32 
33## rule categories by priority
34 
35| priority | category | impact |
36|----------|----------|--------|
37| 1 | never patterns | critical |
38| 2 | choose the mechanism | critical |
39| 3 | measurement | high |
40| 4 | scroll | high |
41| 5 | paint | medium-high |
42| 6 | layers | medium |
43| 7 | blur and filters | medium |
44| 8 | view transitions | low |
45| 9 | tool boundaries | critical |
46 
47## quick reference
48 
49### 1. never patterns (critical)
50…