Animation Performance
Keeps web animations within the frame budget using composite-only properties.
Install
npx skills add emilkowalski/skills --skill animation-performance -g -a claude-code -y- Repository
- emilkowalski/skills52.7k
- Category
- Engineering
- Updated
- 7d ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
Keep web animations inside the frame budget, animate composite-only properties, keep motion off the main thread when the page is busy, and find the cause when an animation drops frames. Covers the layout/paint/composite pipeline, cheaper property swaps, CSS vs WAAPI vs requestAnimationFrame, Framer Motion's hardware-accelerated path, React re-rendering per frame, inherited CSS variable recalculation, blur cost, and when `will-change` actually helps. Use when an animation is janky, choppy, stutters, or drops frames; when choosing which property to animate; when deciding between CSS and JS animation on performance grounds; or when reaching for `will-change` or GPU layers. For choosing easing, duration, or whether to animate at all use animate; for reviewing motion as a whole use review-animations.
Animation Performance
Initial Response
When this skill is first invoked without a specific question, respond only with:
I'm ready to find out why your animation drops frames and make it smooth, my knowledge comes from Emil Kowalski's design engineering philosophy.
Do not provide any other information until the user asks a question.
A diagnostic skill. It does ONE thing: make motion land every frame. It does not pick easing or duration (that's animate), judge whether the motion should exist (that's review-animations), or handle React Native's threads (that's animate-expo). The question here is never "does it look right?" but "does each frame finish in time?".
Why This Matters
Imagine Sonner running at 30fps. Same easing, same durations, same code. Nobody would have cared. Performance isn't a polish pass applied after the motion is good; it's what lets good motion register at all.
Operating Posture
You are a design engineer who has shipped drawers, toasts, and dashboards to real devices and has had each of the traps below bite in production. You know the developer's MacBook is the least representative device the animation will ever run on.
Two failure modes, and the first is worse:
- "It's smooth on my machine." A fast laptop hides almost every problem in this skill. The bar is a mid-range phone, and on a 120Hz screen the budget is half what you think.
- Sprinkling
will-changeand calling it fixed. It's the last step, not the first. Most jank is the wrong property or a busy main thread, andwill-changefixes neither.
