How to use the Animation Performance agent skill

What the skill makes the agent do

Once installed, the agent works as a design engineer whose only question is whether each frame finishes within its time budget. It does not ask whether the motion looks right. It matches the symptom you describe to likely causes, such as animating layout properties like width or margin instead of transform and opacity, or running motion on a busy main thread.

For each fix it proposes, the agent names the cause it addresses and says which findings it verified from code and which need a recording on a real device.

• Matches symptoms (stutter, choppy shadows, lag during navigation, 1px shifts) to causes
• Suggests cheaper properties and profiling checks
• Separates code-verified findings from ones that need a device recording
• Does not choose easing or duration, judge whether motion should exist, or handle React Native threads

Install the animation-performance skill

Download the ZIP for this skill from this page. Then choose one of the two install routes below.

For a personal install that applies to all your projects, unzip the download into ~/.claude/skills/. To scope it to a single project, unzip it into that project's .claude/skills/ folder.

In the Claude apps, you can instead upload the ZIP under Settings → Capabilities → Skills.

• Personal: ~/.claude/skills/
• Project only: .claude/skills/ inside your project
• Claude apps: Settings → Capabilities → Skills, then upload

How to trigger the skill with natural requests

You don't need a special command. Describe the problem in plain language and mention the animation. The skill's main entry point is the symptom table in SKILL.md, so the more specific your symptom, the more directly the agent can match it.

If you ask an open question without a specific problem, the skill replies only with a short readiness message and waits for your question.

• My sidebar animation stutters on my phone. Why?
• The drawer lags when I open it. Is it the margin animation?
• My toast shadow looks choppy while the page loads.
• Why does this element shift 1px when the animation ends?
• Review this Framer Motion x/y animation for dropped frames.

Examples of what the agent will check

The agent checks the properties your animation changes and where the animation runs. A typical finding is an animated margin-left on a sidebar, which re-lays out the page on every frame. The suggested fix is translateX, which moves the sidebar without touching the content beside it.

Another common finding is a box-shadow animation, which repaints the element each frame. The suggested alternative is filter: drop-shadow(), though the agent will note that filter support varies by browser.

• Sidebar margin-left animation → translateX
• Choppy box-shadow → filter: drop-shadow()
• Drag slows as a list grows → set transform directly instead of animating an inherited CSS variable
• Hand-rolled React animation drops frames → write to ref.current.style instead of state
• Safari blur transition lags → keep animated blur() under 20px

What the skill needs and safety notes

The skill lists no requirements. It does not run scripts and does not use the network. It ships as a single file, SKILL.md, which is the only file to review.

Because the skill is only instructions, the main thing to check is accuracy on your device. The skill itself says a fast laptop hides most problems, so test on a mid-range phone or a lower-end device before trusting a result.

• Requires: nothing listed
• Runs scripts: no
• Uses network: no
• Files: SKILL.md

Tips for getting useful results

Give the agent the code for the animated element, not just a description. The agent can only verify cause from code, and it will tell you when a finding needs a real-device recording instead.

Use a phone or lower-end device for your test. The skill treats the developer's laptop as the least representative device.

• Include the CSS, Framer Motion or JavaScript for the animation
• Say what device and browser showed the problem
• Ask for profiling checks when you need to confirm a cause
• Don't accept will-change as a fix on its own; the skill treats it as the last step