# Animation Performance (animation-performance)

> Diagnoses why web animations drop frames and keeps them within the frame budget using composite-only properties and off-main-thread motion.

- Category: [Performance](https://www.myskills.tools/en/categories/performance/)
- Source: Community · Emil Kowalski
- Repository: https://github.com/emilkowalski/skills/tree/main/skills/animation-performance (commit 2d22863)
- SKILL.md: https://github.com/emilkowalski/skills/blob/main/skills/animation-performance/SKILL.md
- Install command: `npx skills add emilkowalski/skills --skill animation-performance`
- License: MIT
- Compatible with: Any SKILL.md agent
- Permissions: read-repo ✓, write-files ✓, shell ✗, network ✗
- Status: Scan passed
- A rule scan cannot catch every risk. Read this skill's SKILL.md and check its permissions before installing.

## Core rule

Animate transform and opacity by default; any other property needs a reason.

## Execution Phases

1. **Find what animates** — List every animation with its driver, properties and when it plays, expanding transition: all and Motion shorthands into what they really animate.
2. **Diagnose in order** — Check animated properties, a busy main thread, per-frame React re-renders, inherited CSS variables and blur over 20px, and only then consider will-change.
3. **Confirm with a recording** — Confirm with the DevTools Performance and Animations panels, profiling on a real mid-range phone rather than by feel.
4. **Report findings** — For each finding give file location, cause, before and after, and whether it was verified from code or needs a device recording; order by cost, stop, and apply fixes only when asked.

## Permissions (summarised from SKILL.md)

| Capability | Needed | Details |
|---|---|---|
| File writes | Required | Reports by default and edits animation code only when the user asks for fixes. |
| Command execution | Not required | Runs no commands; device recordings are made by the user in DevTools. |
| Network outbound | Not required | No network access is needed. |

## SKILL.md frontmatter (YAML)

```yaml
---
name: animation-performance
description: 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.
---
```

Home: https://www.myskills.tools/en/ · URL: https://www.myskills.tools/en/skills/animation-performance/