fixing-motion-performance
Reduces rendering work that makes animations stutter.
- Status
- Observed
- Last reviewed
- 2026-10-10
ID: fixing-motion-performance.
What it does
Classifies motion costs as compositing, painting or layout recalculation. Looks for interleaved DOM reads and writes, scroll polling, animated inherited variables, large blurs and endless loops. Prefers less expensive properties and measurements collected before animation. Keeps the existing library and verifies layers when performance is part of the problem.
When to use it
Use it for stuttering transitions, slow gestures or animations that deteriorate during loading and scrolling. It corrects the technical cost of an effect; the aesthetic direction remains in the brief.
How to use it
Ask for it by name, or invoke it with /fixing-motion-performance in Claude Code or $fixing-motion-performance in Codex. Specify the component, interaction, reproduction conditions and animation system. Ask to find the cause before changing values. Request an alternative that preserves behavior and a test under the conditions where the defect appeared.
What it delivers
- Cause and affected fragments
- Technical alternative and bounded change
- Results of the available performance test
Example
The drawer stutters while we load data. Analyze layout reads and animated properties, apply a targeted correction and retest under load.
Executable instructions
The skill is installed from the source maintained by ibelick; its license applies.
In the workflow
Use the router to choose this capability based on the required outcome.