Skip to content
mcp/skillhub

Agent Skill

Animation Performance skill

animation-performanceemilkowalski/skillsskills/animation-performance/SKILL.md

Keep web animations inside the frame budget — animate composite-only properties, keep motion off the main thread when the page is busy, and find the cause when an animation drops frames. Covers the layout/paint/composite pipeline, cheaper property swaps, CSS vs WAAPI vs requestAnimationFrame, Framer Motion's hardware-accelerated path, React re-rendering per frame, inherited CSS variable recalculation, blur cost, and when `will-change` actually helps. Use when an animation is janky, choppy, stutters, or drops frames; when choosing which property to animate; when deciding between CSS and JS animation on performance grounds; or when reaching for `will-change` or GPU layers. For choosing easing, duration, or whether to animate at all use animate; for reviewing motion as a whole use review-animations.

48kMIT

always on

169 tokname + description

once used

3,015 tokSKILL.md body

bundled files

0

repo stars

48kGitHub

Install the Animation Performance skill

Skills CLI (Claude Code, Codex, Cursor and others)

npx skills add https://github.com/emilkowalski/skills --skill animation-performance

Claude Code, by hand (all projects)

git clone --depth 1 https://github.com/emilkowalski/skills.git /tmp/skills
mkdir -p ~/.claude/skills
cp -R /tmp/skills/skills/animation-performance ~/.claude/skills/animation-performance

For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.

What it costs your context

Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.

WhenWhat loadsCost
Every sessionName and description169 tok
When the agent uses itThe SKILL.md instructions3,015 tok
Only if openedNo bundled files—

Until it is used, animation-performance costs about 8.1× less than the median MCP server we measured (1,362 tokens on every turn). Installing all 15 skills from emilkowalski/skills would load 1,400 tokens of descriptions. Skills vs MCP study

Checks

Our checks found nothing to flag: it follows the Agent Skills specification's naming and size guidelines and doesn't pipe downloads into a shell.

Checked 2026-10-22 · method

What's inside

The headings of its SKILL.md. Read the full file on GitHub.

  • Animation Performance
  • Initial Response
  • Why This Matters
  • Operating Posture
  • Hard Rules
  • The Symptom Table
  • The Frame Budget
  • What You Animate
  • Where It Runs
  • React: Don't Animate Through State
  • Two Traps That Look Correct
  • will-change
  • Should You Avoid JS Animation?
  • Workflow
  • Phase 1: Find what animates
  • Phase 2: Diagnose
  • Phase 3: Report

More skills from emilkowalski/skills

All skills in this repo
  1. emil-design-engemilkowalski/skills

    This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

    376k35 tok idle · 6,015 in use
  2. review-animationsemilkowalski/skills

    Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.

    246k34 tok idle · 1,928 in use
  3. apple-designemilkowalski/skills

    Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.

    233k79 tok idle · 5,067 in use
  4. animation-vocabularyemilkowalski/skills

    Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with. For naming an effect, not designing or building one.

    229k98 tok idle · 2,859 in use
  5. improve-animationsemilkowalski/skills

    Survey a codebase's animation and motion code as a senior motion advisor, then produce a prioritized audit and self-contained implementation plans for other agents (or cheaper models) to execute. Read-only on source code — it plans improvements, it does not apply them. Use when the user asks to "improve the animations", "audit the motion", "make this app feel better", or wants a roadmap of animation fixes rather than a review of a single diff.

    214k97 tok idle · 1,748 in use
  6. find-animation-opportunitiesemilkowalski/skills

    Search a codebase or UI for places that don't animate but should, and reject everything that shouldn't. Read-only; it proposes motion with exact values, it does not implement it. Use when the user asks "what could be animated here?" or wants to "make this feel more alive". For fixing existing animations, use improve-animations or review-animations instead.

    199k78 tok idle · 2,206 in use
  7. pick-ui-libraryemilkowalski/skills

    Pick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own.

    176k61 tok idle · 1,102 in use
  8. prototypeemilkowalski/skills

    Build multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one that feels right. Only runs when explicitly invoked; it does not trigger on its own.

    165k48 tok idle · 1,637 in use