Animation Performance Diagnosis
Diagnose janky web animations and pick cheaper properties and rendering paths for smooth motion
- Repository
- sickn33/agentic-awesome-skills
- Stars
- 49,023
- Licence
- MIT
- Files
- 1 file
What it does
When installed, the agent acts as a design engineer focused only on whether web animations hit their frame budget. It matches the symptom you describe (stutter, choppy shadows, lag during navigation, 1px shifts) 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. It then suggests cheaper alternatives and profiling checks, and says which findings are verified from code versus needing a recording on a real device. It does not choose easing or duration, judge whether motion should exist, or handle React Native threads.
Great for
- Front-end developers whose CSS, Framer Motion or JavaScript animations stutter on phones or lower-end devices
- Designers and engineers who want a checklist for why a drawer, toast or sidebar animation drops frames
Skip it if
- Choosing easing curves, durations or whether an animation is good design, since the skill explicitly leaves those to other skills
- React Native animation threading, which the skill says is handled by a different skill
- Diagnosing performance from a fast laptop alone, since the skill itself warns that this hides most problems
Try asking
- “My sidebar jerks when it opens, the margin-left is animated. How do I fix it?”
- “My toast shadow animation is choppy on Android, what should I change?”
- “Drag gets laggier as my list grows, what's causing it?”
- “Why does my Framer Motion x/y animation drop frames?”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 1 original files, the MIT licence and an attribution note.
animation-performance.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip animation-performance.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip animation-performance.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 3
Ask for the task
No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.
Get better results
- Describe the exact symptom and the device you are testing on, such as a mid-range phone or a 120Hz screen, so the diagnosis targets the real budget.
- Share the CSS or animation code, since the skill names the cause from code before suggesting changes.
- Ask for a profiling checklist if the agent cannot verify a finding from code alone; the skill expects a recording on a real device for some claims.
What's inside
- SKILL.md
Redistributed unmodified from sickn33/agentic-awesome-skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-11-02. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.