Skip to content
A

animation-performance

Keep web animations inside the frame budget

by emilkowalskiFree

Launch
#1649in AI Skills
0In stores

Description

animation-performance is an agent skill for keeping web animations inside the frame budget. It is a diagnostic skill: its question is not wh…

Highlights

  • Diagnoses dropped frames
  • Composite-only properties
  • Keeps motion off a busy main thread
  • Finds the cause of jank
  • Does not choose easing or duration

Ratings & Reviews

No ratings yet

Be the first to rate animation-performance.

People also visit

M

make-interfaces-feel-better

Apply concrete design-engineering details that make interfaces feel polished

AI Skills
Launch
A

animate

Build an animation from scratch, making the decisions in the order

AI Skills
Launch
V

visual-edit-precision

Making UI/frontend changes guided by visual context

AI Skills
Launch
P

performance

Lighthouse-based performance optimization

AI Skills
Launch
F

fixing-motion-performance

Audit and fix animation performance issues including layout thrashing

AI Skills
Launch
E

explain-interface

Explains how a website, a visual effect or an animation was

AI Skills
Launch

animation-performance FAQ

What is the question it asks?

Whether each frame finishes in time, not whether the motion looks right.

Does it choose the easing or duration?

No. That is the job of the animate skill.

When should I use it?

When an animation stutters or the page feels slow while something moves.

How do I install it?

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

Is it checked for security?

Its security audits show passes from Gen Agent Trust Hub, Socket and Snyk.

What are the best animation-performance alternatives?

Popular alternatives to animation-performance include make-interfaces-feel-better, animate and visual-edit-precision. See all animation-performance alternatives

Developer Stuff

Badges