agentleFS
Sign inStart free
malinskibeniaminmalinskibeniamin/skills/animation-performance/SKILL.md

animation-performance

Skill4 starsChanged 11 days agoMITView on GitHub

Diagnose measured web animation jank, dropped frames, busy-thread motion, per-frame React work, CSS variable invalidation, or GPU layer cost.

19 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use write-swift, animate-expo and 3 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • sanmidableSkill

    write-swift

    Also in 9 projects that use this

  • sanmidableSkill

    animate-expo

    Also in 7 projects that use this

  • cal1888Skill

    pick-ui-library

    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.

    Also in 11 projects that use this

  • wxyhgkSkill

    find-animation-opportunities

    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.

    Also in 15 projects that use this

  • arkanSkill

    review-animations

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

    Also in 15 projects that use this

The file

We split this skill into the rules it gives an agent

3 rules. 0 are common, 3 are distinctive, and 0 are very specific to this project.

  • 0

    Common

    Most of the 19 edited versions we read keep these.

  • 3

    Distinctive

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Test one cause with the smallest equivalent change:

    line 21
  2. Distinctive:

    No device access means that hardware-specific result remains unverified, not fabricated.

    line 37
  3. Distinctive:

    When route loading, bundle cost, or backend work dominates rather than frames, load ux-performance per the dependency-loading contract.

    line 54

“Common” is measured: kept by at least 6 in 10 of the 19 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Find the frame bottleneck before changing motion. Adapted from Emil Kowalski; provenance. Audit means report; an explicit fix request continues through verification and the project's delivery gates.

For optimization/fixes, read the shared experiment loop before edits; it owns original/accepted baselines, keep/revert decisions and unresolved leads.

Loop

  1. Capture the failing interaction: route, data size, animation driver/properties, browser/device, refresh rate, and overlapping navigation/loading. Save a baseline Performance trace under .context/; static code suspicion is not measured jank.
  2. Locate the late-frame work: JavaScript/React, style invalidation, layout, paint, composition, or excessive layer memory. Frame time is about 16.7 ms at 60 Hz and 8.3 ms at 120 Hz; a smooth desktop run does not prove phone performance.

  3. Test one cause with the smallest equivalent change:

    EvidenceCandidate
    Layout each frameTransform decoration instead; retain required flow geometry
    Expensive shadow/blur paintSmaller painted area or simpler effect; compare visual semantics
    Busy JS during motionEligible CSS/WAAPI path; confirm actual compositor execution
    React render every frameMotion values or bounded ref updates; retain semantic React state
    Cost grows with descendantsLocalize inherited CSS-variable writes to the moving element
    Individual Motion transforms miss accelerationCheck version/path: Motion 14.2+ can combine HTML shorthands; try full transform on older versions
    Layer setup causes observed hitchScoped, temporary will-change; remove if gain is unproven
  4. Replay identical base/candidate conditions and compare late frames, layout/paint, and memory. Recheck rapid reversal, cancellation, reduced motion, focus, and visual equivalence. Reject displaced cost and changes smaller than run-to-run variance.
  5. Report cause, file:line, trace path, before/after measurements, and device limits. No device access means that hardware-specific result remains unverified, not fabricated.

Constraints

  • Name transition properties instead of all; default to transform/opacity.
  • Hardware acceleration is progressive enhancement. CSS, WAAPI, and Motion are not blanket guarantees; verify current Motion guidance and the installed library path. CPU throttling does not emulate GPU or phone memory.
  • Motion 14.2+ can combine HTML x/y/scale/rotate into an eligible WAAPI transform; preserve those shorthands when appropriate. Layout/layoutId, onUpdate, transformTemplate, inertia and frame-driven values still need main-thread work.
  • A scale is not a universal height/padding substitute; it scales text and leaves flow unchanged. Preserve correctness before choosing a cheaper rendering path.
  • Profile blur/filter/clip-path on supported browsers; a fixed pixel cutoff proves nothing.
  • Cancel frame loops, observers, and animations on unmount; release temporary layer hints. React Compiler owns memoization; avoid adding memo wrappers as a substitute for diagnosis.

When route loading, bundle cost, or backend work dominates rather than frames, load ux-performance per the dependency-loading contract.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free