Optimize Web Animations
Profile, audit, and optimize frontend page performance with emphasis on animation work...
Install
npx skills add MengTo/Skills --skill optimize-web-animations -g -a claude-code -y- Repository
- MengTo/Skills7.2k
- Category
- Design
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 1,910 tokens
- Runs scripts
- No, instructions only
What it does
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.
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.mdor local instructions. - Run
git status --shortearly. - 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.
- Read
