In the Skill's Own Terms
An audit-and-fix playbook for CSS and JS animation performance, aimed at designers and developers reviewing or refactoring janky transitions, scroll-linked motion and blur effects. It ships as a slash command: invoked bare, it applies the guidelines to any animation work in the conversation; given a file, it reports violations by quoting the exact line, why it matters, and a code-level fix.
Rules are ordered by priority from never patterns, choose the mechanism and tool boundaries at critical, through measurement, scroll, paint, layers and blur, down to view transitions. It refuses to migrate animation libraries unless asked, applying rules within the existing stack.
What it produces
- One short sentence per violation explaining why it matters.
- A concrete, code-level fix for each violation.
- A stated justification for any non-default choice of rendering work.
How It Works
- 01Invoke It as a Slash Command
Run /fixing-motion-performance to bind the constraints to whatever animation work is already under discussion in the session.
- 02Or Point It at a File
Passing a path switches it into review mode, checking that file against every rule rather than constraining live work.
- 03Report in Three Parts
Each finding quotes the offending line, gives one short sentence on why it matters, and proposes a code-level fix.
- 04Sort Properties by Rendering Step
The glossary splits work into composite, paint and layout so the reviewer knows which animations are cheap and which are expensive.
- 05Enforce in Priority Order
Critical categories are checked before the lower-impact ones, so never patterns and tool boundaries are settled first.
- 06Stay Inside the Current Stack
Library migration is not part of the job; the rules are applied to whatever animation system the codebase already uses.