PlugWiki

animation-performance Skill for Claude: Fix Janky Web Animations

Makes Claude find why a web animation drops frames, name the cause, and propose a fix that keeps it smooth.

Installs
52.3K
on skills.sh
Stars
52.7K
on GitHub
Updated
Oct 2026
last repo commit

When an animation is janky, choppy or stutters, the agent works through a symptom table and a ranked diagnosis list: which properties animate, whether the page is busy, whether React re-renders every frame, inherited CSS variables, blur cost, and only last will-change. Every fix must name the cause it addresses.

It is diagnosis only. SKILL.md says it does not pick easing or duration, judge whether motion should exist, or handle React Native. It ends with a report per finding and applies fixes only when you ask.

Good for

  • Front-end developers with an animation that stutters or drops frames
  • Designers who ship motion and need to check it is cheap to run
  • React developers using Motion or Framer Motion

Install animation-performance

Claude Code

  1. 1

    Copy this prompt.

    Install the animation-performance skill in Claude Code. Run this command:

npx skills add https://github.com/emilkowalski/skills --skill animation-performance

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

  1. Initial Response
  2. Why This Matters
  3. Operating Posture
  4. Hard Rules
  5. The Symptom Table
  6. The Frame Budget
  7. What You Animate
  8. Where It Runs
  9. React: Don't Animate Through State
  10. Two Traps That Look Correct
  11. will-change
  12. Should You Avoid JS Animation?
  13. Workflow
  14. Phase 1: Find what animates
  15. Phase 2: Diagnose
  16. Phase 3: Report

Key facts

Author
emilkowalski
Repository
emilkowalski/skills
License
MIT
Installs on skills.sh
52,325 (Nov 2, 2026)
GitHub stars
52,705 (Nov 2, 2026)
Last repo commit
Oct 28, 2026
What installs
1 file including SKILL.md (the folder holds SKILL.md only)
Based on
Emil Kowalski's design engineering philosophy
Starts with
One fixed line if invoked with no question, then waits

What it includes

  • If invoked with no question, replies only with a one-line readiness message

    It gives nothing else until you ask a question.

    Initial response

  • Maps 9 symptoms to fixes, such as stutter, choppy shadows and 1px shifts

    For example: animate transform and opacity, use filter: drop-shadow() instead of box-shadow.

    Symptom table

  • Explains the 16.7ms budget at 60Hz and 8ms at 120Hz

    Layout, paint and composite tiers decide the cost per property.

    Frame budget

  • Compares JS requestAnimationFrame, WAAPI and CSS transitions and Motion's accelerated path

    Notes that motion 14.2 and later accelerates x and y shorthands.

    Where it runs

  • Lists each animation with its driver, properties and when it plays

    Expands transition: all and Motion shorthands.

    Files · Phase 1: Find what animates

  • Works down 7 ranked checks, then confirms with a recording

    Suggests the DevTools Performance and Animations panels and a real mid-range phone.

    Read · Phase 2: Diagnose

  • Per finding: element, file and line, cause, before, after, and how it was verified

    Orders findings by cost, then stops. Fixes are applied when you ask.

    Phase 3: Report

From the official docs

Questions

What does animation-performance do?

It diagnoses web animations that drop frames. It finds what is animated, names the cause, and proposes a change that stays inside the frame budget.

How do I install animation-performance?

Use the install box above. The skill is a single SKILL.md file. The author's README also installs the whole repo with npx skills@latest add emilkowalski/skills.

Does it write the animation for me?

No. SKILL.md says it does one thing: make motion land every frame. Choosing easing and duration is the job of the author's animate skill, and judging whether motion should exist is review-animations. React Native is animate-expo.

What are the most common causes it checks for?

In order: animating layout properties, animating while the main thread is busy, React re-rendering per frame, an inherited CSS variable that slows with content, animated CSS variables or old Motion versions, and blur above 20px. will-change is last.

Does it run scripts or need a key?

No scripts are bundled and SKILL.md names no key. It reads your animation code, and for proof it asks for a DevTools recording.

Is animation-performance safe?

It is a text instruction file with no scripts. SKILL.md says it reports findings and applies fixes when you ask, so edits to your code happen on your request.

Information

updated Nov 2, 2026

Repository
emilkowalski/skills
Folder
skills/animation-performance

emilkowalski/skillsskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3
  1. animation-performance SKILL.md · github.com
  2. emilkowalski/skills README · github.com
  3. animation-performance on skills.sh · skills.sh

Updated Nov 2, 2026.