What problem does it solve? Animated Next.js/React components often suffer from frame drops, memory leaks, and Strict Mode breakage caused by unsafe GSAP setup, Lenis/ScrollTrigger conflicts, and unguarded DOM access. This Skill performs a strict audit of your animation code, pinpoints the root cause, and delivers refactor-ready fixes. ## Core Features & Use Cases - GSAP Lifecycle Audit: Detects useEffect/useLayoutEffect used for GSAP setup and migrates them to useGSAP with proper scope and cleanup, safe for React Strict Mode. - Lenis & ScrollTrigger Safety Checks: Flags production markers, duplicated Lenis setup, and evidence-based overflow-x: hidden issues affecting scroll metrics and pin spacing. - Render Loop & Media Optimization: Catches per-frame setState in GSAP callbacks and enforces correct next/image usage with priority only for true LCP hero media. - Use Case: Paste a TSX hero section that stutters on scroll, and receive a severity-ranked root cause analysis, an ordered action plan, and a complete copy-paste-ready code fix. ## Quick Start Audit this TSX animation component for GSAP lifecycle violations, memory leaks, and scroll jank, then give me the fixed code.
