What is the animation-performance skill?
animation-performance is a skill in emilkowalski/skills that asks one question: does each frame finish in time? It defaults animated properties to transform and opacity, names the cause before changing code, warns that a fast development machine hides jank real users see, and flags setState inside requestAnimationFrame as a common cause of dropped frames.
animation-performance is one skill in emilkowalski/skills. It diagnoses and fixes janky animations by checking whether each frame finishes inside its time budget, leaving easing, duration and overall motion choices to other skills.
The skill takes the stance of a design engineer who ships to real phones rather than a fast development laptop, and treats a smooth animation on that laptop as no proof the same animation holds up on typical hardware.
What changes in the agent's output
- transform and opacity become the default animated properties, with any other property needing a specific reason attached.
- A symptom such as stuttering or drag lag gets traced to a named cause, such as a layout-triggering property, before any code changes.
- transition: all gets replaced with an explicit property list, since the shorthand animates properties nobody meant to touch.
- setState calls inside requestAnimationFrame get flagged, since each call forces a React re-render on every frame and blows the frame budget.
The frame budget it checks against
60fps leaves about 16.7 milliseconds per frame, or 8 milliseconds on a 120Hz screen. Only transform and opacity skip straight to the cheapest composite stage; other properties trigger layout or paint work first, which costs far more of that budget.
Who the animation-performance skill is for
Best for
- Projects with an animation that looks fine locally but stutters on real devices.
- Debugging a specific symptom, such as shadow choppiness or drag lag, down to its cause.
- React apps animating state with setState instead of writing straight to the DOM.
Not for
- If your job is mostly choosing easing curves and duration for a new animation, the animate skill is the better fit for that.
- When the task is keeping GSAP-specific transforms and will-change tidy, the GSAP performance skill is the better fit for that.
- If your job is mostly running a seven step motion workflow across keyframes and loaders, the CSS animation creator skill is the better fit for that.
Use it with UiChemy
Frame-budget fixes apply to motion already built into a page. Once an animation runs smoothly, UiChemy AI to WordPress carries that front-end build into an editable WordPress page.
How to install Animation Performance Skill for AI Coding Agents
npx skills@latest add emilkowalski/skillsAdd the skills
Run
npx skills@latest add emilkowalski/skillsfrom your project to pull in the full set, including animation-performance.Or use the plugin marketplace
In Claude Code,
/plugin marketplace add emilkowalski/skillsregisters the repository, then install the plugin that bundles animation-performance with the rest.Ask for it by name
Describe a janky or stuttering animation in your prompt and the agent pulls in animation-performance to diagnose the frame budget.
Check that it loaded
Describe a stuttering animation to the agent and check that it names a specific cause, such as a layout-triggering property, before proposing a fix.
Key features
- Frame-budget diagnosisEvery performance question reduces to whether a frame finishes inside its 16.7 or 8 millisecond budget, rather than a general sense of smoothness.
- transform and opacity defaultAnimating any property besides transform and opacity needs a stated reason, since those two are the only ones that skip layout and paint.
- Symptom-to-cause tableA lookup table matches a visible symptom, such as stuttering or shadow choppiness, to the pipeline stage most likely causing it.
- Main-thread awarenessJavaScript animation always runs on the main thread, so motion during heavy work like navigation or data fetching is flagged as a frame-drop risk.
- React re-render trapCalling setState inside requestAnimationFrame triggers a re-render every frame; writing directly to a ref's style avoids that cost.
- Inherited variable costChanging a CSS custom property on a parent recalculates styles for every child that reads it, a cost that grows as the page grows.
- Blur cost limitAnimated blur() is called out as expensive, especially in Safari, with a rough ceiling around 20px before the cost becomes visible.
- will-change disciplinewill-change gets added only after a measured frame drop, since browsers already promote transform and opacity animations and overusing it wastes GPU memory.
Frequently asked questions
What is the animation-performance skill?
It is a skill in emilkowalski/skills that diagnoses and fixes janky animations by checking whether each frame finishes inside its time budget. It defaults animated properties to transform and opacity and names the exact cause of a frame drop before changing any code.
How do I install the animation-performance skill?
Run npx skills@latest add emilkowalski/skills from a project to add the full set, or register the repository as a Claude Code plugin marketplace and install the bundled plugin. Describing a stuttering animation in a prompt also pulls the skill in automatically.
What is a frame budget in animation-performance?
At 60 frames per second, each frame has about 16.7 milliseconds to finish, or 8 milliseconds on a 120Hz screen. The skill treats any animation question as a check of whether work fits inside that budget on real hardware, not a development laptop.
Why does animation-performance default to transform and opacity?
Those two properties are the only CSS properties that skip straight to the cheapest rendering stage, composite. Any other animated property triggers layout or paint work first, which costs far more of the available frame budget.
How does setState inside requestAnimationFrame hurt animation performance?
Calling setState on every animation frame forces a React re-render each time, which quickly exceeds the frame budget. Writing the new value straight to a ref's style property updates the DOM directly and skips the re-render cost entirely.
When should will-change get added to an animated element?
Only after a measured frame drop or a visible shift, not as a default. Browsers already promote transform and opacity animations onto their own layer, so adding will-change everywhere wastes GPU memory without a measured benefit.
Does animation-performance cover easing and animation duration choices?
No. The skill deliberately limits itself to frame-budget diagnosis and defers easing curves, duration values and overall motion review to other skills in the collection, since those are design choices rather than performance problems.