Skip to content
All skills

/animation-performance

Animation Performance

If your animation doesn’t run at 60 frames per second, nothing else matters. This skill ensures your animations stay smooth regardless of the device or browser.

Updated November 2, 2026

What it does

  • Swaps layout and paint properties for ones the compositor handles well, like transform instead of margin
  • Moves motion off the main thread when the page is busy, with CSS, WAAPI, or Motion’s accelerated path
  • Catches the subtle issues: React re-rendering every frame, inherited CSS variables, and will-change everywhere
  • Finds the cause of a dropped frame before changing anything in code

When to use it

When you encounter any performance issues with your animations.

What the skill changed

Animating the sidebar with margin-left causes the app to drop frames, so the skill uses transform instead. The skill analyzed the cause and fixed it.

Example prompts

You don’t need special wording. Describe the problem the way you’d describe it to a teammate. Here are some more to try on your own product.

The course behind these skills

These skills come from what I teach in AI for UI. Join the waitlist to get two lessons and be the first to know when enrollment reopens on December 8.