# animation-performance

> Claude/Codex skill by [@emilkowalski](https://omgskills.com/library/emilkowalski/index.md) · 57k stars · 83k installs · Updated 2026-11-13

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. 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.

Tags: agent-skills, animation, claude-code, codex, cursor, design-engineering

## Install

```sh
git clone https://github.com/emilkowalski/skills /tmp/skills && ln -s /tmp/skills/skills/animation-performance ~/.claude/skills/animation-performance
```

## From README

Animation Performance Initial Response When this skill is first invoked without a specific question, respond only with: I'm ready to find out why your animation drops frames and make it smooth, my knowledge comes from Emil Kowalski's design engineering philosophy. Do not provide any other information until the user asks a question. A diagnostic skill. It does ONE thing: make motion land every frame. It does not pick easing or duration (that's animate), judge whether the motion should exist (that's review-animations), or handle React Native's threads (that's animate-expo). The question here is never "does it look right?" but "does each frame finish in time?". Why This Matters Imagine Sonner running at 30fps. Same easing, same durations, same code. Nobody would have cared. Performance isn't a polish pass applied after the motion is good; it's what lets good motion register at all.

## Links

- HTML page: https://omgskills.com/library/emilkowalski/skills/animation-performance/
- GitHub: https://github.com/emilkowalski/skills
- Author: [@emilkowalski](https://omgskills.com/library/emilkowalski/index.md)

## More from this repo

- [break-ui](https://omgskills.com/library/emilkowalski/skills/break-ui/index.md) — Try to break a piece of UI by feeding it worst-case data — long names, unbreakable emails, one-letter names, missing...
   - [@emilkowalski](https://omgskills.com/library/emilkowalski/index.md) · 56k stars
- [learn-taste](https://omgskills.com/library/emilkowalski/skills/learn-taste/index.md) — Turn the design corrections a user made during a session into rules the next agent follows.
   - [@emilkowalski](https://omgskills.com/library/emilkowalski/index.md) · 56k stars
- [emil-design-eng](https://omgskills.com/library/emilkowalski/skills/emil-design-eng/index.md) — This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible...
   - [@emilkowalski](https://omgskills.com/library/emilkowalski/index.md) · 56k stars