web-animation-perf

What problem does it solve?

This Skill eliminates frustrating jank, stutter, lag, and visual drift in web animations caused by common implementation mistakes, saving developers hours of debugging inconsistent motion behavior.

Core Features & Use Cases

• Three Cardinal Rules Guidance: Clear, actionable rules to avoid the most common animation performance pitfalls, including conflicting CSS transitions with JS-driven updates, incorrect timer usage, and animating layout-heavy properties.
• Diagnostic Workflow: A step-by-step process to narrow down the root cause of animation issues, with specific symptoms tied to each common culprit for fast troubleshooting.
• Real-World Validation: Includes a case study of fixing a broken orbital diagram animation, plus guidance for using Playwright to measure rendered geometry and confirm fixes work as expected.
• Use Cases: Ideal for debugging or building continuous motion effects like rotation, orbital movement, parallax, scroll-linked interactions, marquees, carousels, and any JS-driven CSS animation where smooth performance is required.

Quick Start

Use the web-animation-perf skill to debug and fix stuttering, drifting animation issues in your web application's continuous motion effects.