Frame Budget
Finds why an animation drops frames and keeps it smooth.
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 motion-review.
Install in under a minute
Mac or Linux, after you download
unzip frame-budget.zip -d ~/.claude/skills/Windows PowerShell
Expand-Archive frame-budget.zip -DestinationPath $HOME\.claude\skills- Start a new Claude Code session so it sees the skill.
- Ask in plain words, for example: "Use Frame Budget on this project."
- Unzip the download, then zip just the frame-budget folder if your computer added an extra folder.
- In Claude.ai, open Settings, then Capabilities, and upload it under Skills.
- Turn the skill on and ask Claude to use it.
Frame Budget uses the open SKILL.md format, so it also works in agents like Cursor, Gemini CLI, GitHub Copilot and Codex. Copy the frame-budget folder into that agent's skills folder, for example .cursor/skills/ or .github/skills/ in your project.
What's inside
The 13 main sections of the SKILL.md, in order.
- Initial Response
- Why This Matters
- Operating Posture
- Hard Rules
- The Symptom Table
- The Frame Budget
- What You Animate
- Where It Runs
- React: Don't Animate Through State
- Two Traps That Look Correct
- will-change
- Should You Avoid JS Animation?
- Workflow
In the download: LICENSE, NOTICE.md, SKILL.md
Credit and license
Frame Budget is a renamed, packaged copy of animation-performance by Emil Kowalski (github.com/emilkowalski/skills), used under the MIT license. The license and a list of changes ship inside the download.
Questions
Does Frame Budget work in Claude.ai, not just Claude Code?
Yes. In Claude.ai, upload the frame-budget folder as a zip in Settings under Capabilities. It also works in other agents that support Agent Skills, like Cursor, Gemini CLI and GitHub Copilot.
What do I get?
A zip with the frame-budget folder: its SKILL.md (2,669 words) and its license files. One payment, instant download.
Who made Frame Budget?
It's a renamed, packaged copy of animation-performance by Emil Kowalski, used under the MIT license. The license and a list of changes ship inside the download.