fixing-motion-performance_skill

Overview

This skill helps you detect and fix animation performance issues in front-end projects. It encodes practical rules and checks to keep motion smooth, avoid jank, and preserve the existing animation stack. Use it to review code, get concrete fixes, and enforce safe animation patterns without migrating libraries.

How this skill works

Run the skill to apply a set of prioritized rules that flag critical anti-patterns, measurement mistakes, and expensive paint/layout work. When given a file path, it scans for rule violations, quotes the exact offending snippet, explains why the issue matters in one sentence, and provides a concrete code-level fix. It never rewrites your animation library or mixes systems unless you explicitly request migration.

When to use it

• When adding or changing CSS, WAAPI, Motion, rAF, or GSAP animations
• When refactoring janky interactions, transitions, or reveal-on-scroll effects
• When implementing scroll-linked motion or scroll-driven reveals
• When animating layout, filters, masks, gradients, or CSS variables
• When reviewing components that use will-change, transforms, or layout measurement

Best practices

• Prefer transform and opacity for continuous motion; reserve paint/layout for tiny, isolated surfaces
• Batch DOM reads before writes and measure only once; apply FLIP for layout-like transitions
• Avoid interleaving layout reads and writes in the same frame and stop rAF loops when idle
• Use IntersectionObserver or Scroll/View Timelines instead of polling scroll position
• Apply will-change sparingly and temporarily; validate layer promotion with profiling tools

Example use cases

• Scan a JS or CSS file that animates width/height and get a FLIP-based alternative
• Detect continuous blur or filter animations and replace them with opacity/translate options
• Review a scroll-linked animation and recommend using Scroll/View Timeline or IO
• Find interleaved layout reads/writes inside an animation loop and suggest batching fixes
• Identify excessive use of promoted layers and advise surgical will-change usage