animation-performancecommit 2d22863SKILL.md · 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.
npx skills add emilkowalski/skills --skill animation-performanceCommand selected. Copy it manually.
- Permissions
- read-repo
- write-files
- shell
- network
- Compatible with
- Any SKILL.md agent
- GitHub
- 52.5k
- Source
- Community · Emil Kowalski
- Status
- Scan passed
- License
- MIT
- Category
- Performance
Core rule
Animate transform and opacity by default; any other property needs a reason.
Execution Phases
Phase 01Find what animates
List every animation with its driver, properties and when it plays, expanding transition: all and Motion shorthands into what they really animate.
Phase 02Diagnose 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.
Phase 03Confirm with a recording
Confirm with the DevTools Performance and Animations panels, profiling on a real mid-range phone rather than by feel.
Phase 04Report 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)
---
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.
---