fixing-motion-performance

Overview

Fixing Motion Performance is a Claude Code skill that provides a prioritized ruleset for diagnosing and resolving animation performance issues in web interfaces. It covers CSS transitions, Web Animations API, Motion libraries, requestAnimationFrame, GSAP, and scroll-linked animations, with rules organized by severity from critical to low impact.

Key Features

• Priority-Based Rule System — Nine rule categories ranked by impact, from critical "never patterns" (layout thrashing, scroll event animation) to lower-priority concerns like view transitions.
• Rendering Pipeline Awareness — Rules are grounded in the browser rendering pipeline, distinguishing between composite-only properties (transform, opacity), paint-triggering properties, and layout-triggering properties.
• Scroll Animation Guidance — Specific rules for scroll-linked motion, recommending Scroll/View Timelines and IntersectionObserver over polling scroll position.
• Flexible Application — Can be applied as a blanket constraint on all UI animation work or used to audit a specific file, reporting exact violations with concrete code-level fixes.

Who is this for?

This skill is for frontend developers working on web applications with animations or transitions who encounter jank, frame drops, or sluggish interactions. It is particularly useful when building scroll-linked effects, complex transitions, or any motion that touches layout or paint properties.