# Optimize Web Animations

Profile, audit, and optimize frontend page performance with emphasis on animation work...

- Repository: https://github.com/MengTo/Skills (7170 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add MengTo/Skills --skill optimize-web-animations -g -a claude-code -y`
Codex: `npx skills add MengTo/Skills --skill optimize-web-animations -g -a codex -y`
Cursor: `npx skills add MengTo/Skills --skill optimize-web-animations -g -a cursor -y`
Gemini CLI: `npx skills add MengTo/Skills --skill optimize-web-animations -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

1. 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.

The rest: https://github.com/MengTo/Skills/blob/HEAD/agent-skills/codex/optimize-web-animations/SKILL.md