What problem does it solve? Web animations that animate layout properties like width, height, top, left, or box-shadow force the browser to recalculate layout and repaint every frame, causing stutter and dropped frames. This Skill diagnoses those expensive animations and rewrites them to run on the compositor using only transform and opacity, so motion holds 60fps. ## Core Features & Use Cases - Property mapping: Replaces expensive animations (width/height, top/left, box-shadow, filter) with cheap equivalents like transform: translate/scale and opacity cross-fades on pseudo-elements. - FLIP animations: Implements First-Last-Invert-Play with the Web Animations API to animate layout changes such as reordering lists or moving elements between containers without distortion. - Height auto and thrashing fixes: Animates height: auto via grid 0fr→1fr or interpolate-size, and eliminates layout thrashing by batching DOM reads before writes. - Verification workflow: Ships a standalone HTML deliverable with a ?t=N freeze harness, screenshot checks at start/mid/end, and DevTools profiling steps to confirm no per-frame Layout or Paint. - Use Case: A hover effect that animates box-shadow feels choppy; the Skill moves the shadow to a ::after pseudo-element and animates only its opacity, then verifies compositor-only frames in DevTools. ## Quick Start Ask the AI to fix a choppy hover or scroll animation by converting it to transform and opacity, then verify it holds 60fps with no per-frame layout or paint.
