optimize-web-animations
Profile, audit, and optimize frontend page performance with emphasis on animation work, memory-leak risks, long-session slowdowns, CSS animations, canvas/WebGL requestAnimationFrame loops, marquees, skeletons, GSAP/Three/Matter effects, timers, listeners, and observers. Use when the user asks to make animations performant, pause offscreen animations, look for memory leaks, profile pages that slow the computer over time, fix janky scrolling, reduce CPU/GPU use, or repeat the "only play in view" optimization on React/Vite/Next/frontend pages using Codex Browser.
Install
With your agent
Install OMGSkills skill "mengto/skills:optimize-web-animations" into this agent's normal skills directory: call the OMGSkills MCP get_install_plan tool for your agent and run the script it returns (it installs only the pinned commit and verifies SKILL.md), and stop if MCP or the pin is unavailable. Do not overwrite or change existing skills without asking me.
Manual command
git clone https://github.com/MengTo/Skills /tmp/Skills && ln -s /tmp/Skills/agent-skills/codex/optimize-web-animations ~/.claude/skills/optimize-web-animationsFrom README
Optimize Web Animations Core Rule Measure the real page before editing. The goal is not to remove motion; it is to make offscreen work stop, visible motion resume correctly, and route/unmount cleanup release long-lived resources. Use Codex Browser when available, especially for localhost pages. Do not use Chrome unless the user explicitly asks for it. Workflow Inspect repo context. Read AGENTS.md or local instructions. Run git status --short early. Find page components, animation hooks, CSS keyframes, requestAnimationFrame, setInterval, setTimeout, canvas/WebGL/physics components, media elements, GSAP timelines/tweens, and existing visibility utilities. Search effect cleanup for event listeners, observers, RAF loops, intervals, timers, external scripts, media streams, WebGL textures/materials/geometries/renderers, and async work that can complete after unmount. If the worktree is dirty, plan narrow staging from the start. Capture a baseline in the browser.
More from this repo
animation-on-scroll
Used to create an on-scroll animation trigger using IntersectionObserver with Tailwind-friendly animation classes and...
animation-systems
Used when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel.
beautiful-shadows
Apply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation.