Animation Performanceby Emil Kowalski

Animation Performance Skill.

Find out why an existing web animation drops frames. Animation Performance guides your coding agent through rendering cost, busy main-thread work and per-frame updates, with a cause attached to each proposed change.

Web Animation
Frame Performance
Diagnostic Review

Download OpenDesign View Usage Guide

Source Review · animation-performanceSKILL.md

Task Motion & Video Produces • An inventory of animated elements, drivers and properties • Cause-based findings with file locations and before/after proposals • A clear distinction between code inspection and device-recorded evidence Before You Start Animation source and a reproducible interaction; browser profiling and a real target device to verify performance.

Editorial summary · source reviewed 2026-10-12 · not a generated example

01 What It Does

Trace the Cost Behind a Missed Frame

This workflow is described in the pinned source. It is not a recorded run or a benchmark.

Source-based workflowNot an execution benchmark

The Working Approach

The same tab indicator may look smooth while idle and stutter during navigation. This skill separates two questions: how much rendering work each frame triggers, and whether the animation driver competes with other work on the main thread. It starts with the properties and driver rather than adding GPU hints by default.

The source also checks less obvious paths: a React state update on every frame, an inherited CSS variable changing across a large subtree, expensive blur and Motion shorthand transforms. Recommendations are tied to the code and qualified by browser and device behavior; a fast desktop is not treated as proof of a fix.

Expected Deliverables

An inventory of animated elements, drivers and properties
Cause-based findings with file locations and before/after proposals
A clear distinction between code inspection and device-recorded evidence

See the Example Brief

From Input to Findings

01
Inventory the Motion in Scope
List each element, animation driver and property, along with simultaneous work such as navigation or hydration. Expand broad transitions and library shorthand before judging their cost.
02
Find the Likely Cause
Inspect layout and paint work first, then main-thread contention, per-frame React renders and style recalculation. Relate each proposed change to a specific path rather than calling it a generic optimization.
03
Profile the Real Interaction
Use browser performance recordings to inspect dropped frames and long tasks. Check a real target phone when possible; desktop CPU throttling does not reproduce a weak GPU or a device’s memory limits.
04
Report With Verification Limits
Provide file locations, causes and before/after proposals, ordered by expected cost. State what was inferred from code and what was measured, then wait for authorization to apply fixes.

02 When to Use It

When to Use It

Use it for web motion that stutters or slows down under load. It is concerned with frame delivery, not choosing a more attractive animation.

A Good Fit

Motion During NavigationTab indicators, page transitions and loading-adjacent motion can compete with route changes, hydration or long tasks.
Drawers That Slow With ContentInspect inherited variables, repeated style calculation and too many animated nodes when a drag works with a few items but degrades with a longer list.
Hand-Written React AnimationFind state updates inside frame, pointer or scroll handlers that make React render more often than the effect needs.

Limits to Check

Not an Easing or Timing DesignerChoosing a curve, duration or whether motion belongs in the interface is outside this skill’s narrow performance remit.
Web, Not React NativeThe source targets browser rendering and web animation drivers. React Native thread behavior is handled by a separate skill in the repository.
Acceleration Is Not GuaranteedBrowser versions, properties and layer decisions affect acceleration. Preserve layout correctness and verify on target devices rather than promising a frame rate.

Bring These Inputs

A Reproducible InteractionDescribe exactly when the stutter appears: opening a drawer, switching routes or dragging after data loads. Include the amount of content needed to reproduce it.
Animation and Component CodeSupply the CSS, driver or library version, animated properties and relevant state handlers. Include the surrounding work that runs at the same time.
Target Browser and DeviceName the affected browser, device and refresh rate if known. Share performance recordings when available, and distinguish them from subjective impressions.

03 Decisions That Matter

Decisions That Matter

Rendering Cost Comes Before Layer Hints
The source prefers transform and opacity where they preserve the intended behavior. Changing layout, repainting effects and broad transitions require explicit scrutiny.
The Driver Matters Under Load
A requestAnimationFrame loop needs the main thread. CSS or Web Animations API effects may use an accelerated path for eligible properties, but the actual browser behavior still needs checking.
Small Code Patterns Can Affect a Whole Subtree
An inherited custom property or repeated state update can make a simple movement expensive. The review follows those update paths instead of assuming transform alone makes an effect cheap.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Install from Emil Kowalski’s public skills repository and select this skill for your agent.

Scoped Install Command

npx skills@latest add emilkowalski/skills --skill animation-performance

The README documents the repository install with npx skills@latest add emilkowalski/skills. The scoped command below selects this entry. It requires Node.js/npm for npx; the source does not pin a minimum version. Inspect the upstream instructions before running it.

Reproduce One Stuttering Interaction

This example brief is original and untested. Replace its component and environment details with your project’s actual context.

Example Brief

Use animation-performance to review our web dashboard drawer, which stutters while a route loads and gets worse with 60 list items. Read the existing CSS and React handlers without changing them. List animated properties, the driver, state updates and custom properties involved. Propose the smallest changes that address a named cause while preserving layout, gesture interruption and reduced-motion behavior. If browser access is available, record the interaction with both 5 and 60 synthetic items and inspect long tasks and frame delivery. State the browser and device used. Do not claim a mobile performance improvement from a desktop-only recording, do not add will-change by default, and stop after the report.

Review the Evidence Before Fixing

Check the report against the code and actual browser behavior. Keep unverified observations separate from reproduced failures.

Each proposed change names a rendering or update-path cause and a source location.
Before/after claims use comparable recorded interactions; unmeasured device behavior is clearly marked.
The proposed optimization preserves intended layout and interaction rather than merely looking smoother in isolation.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesign Read the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner: Emil Kowalski
Repository: emilkowalski/skills
Skill File: skills/animation-performance/SKILL.md
License: MIT
Reviewed Snapshot: 2026-10-12 · 2d228630ba14

Editorial Source Summary

Diagnose dropped frames in web animations: rendering cost, main-thread contention, per-frame React updates and inherited CSS variables. This is an editorial summary of the pinned source, not an execution report.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Should every animation be rewritten in CSS?

No. The source keeps JavaScript libraries useful for springs, shared-layout effects, gestures and interruption. Its concern is whether the chosen driver and properties can meet the needs of the interaction under load.

Does adding will-change solve dropped frames?

Not generally. The source treats it as a targeted measure after identifying a relevant issue; extra layers consume memory, and the hint does not remove layout work or unblock a busy main thread.

Is a smooth desktop recording enough?

No. The source asks for real-device evidence when judging mobile performance. CPU throttling is useful for investigation but does not recreate a phone’s GPU or memory constraints.

Animation Performance

Find the Work Behind the Stutter

Choose one reproducible interaction, trace its frame cost and verify changes on the intended device. A code recommendation is a starting point, not a performance benchmark.

Download OpenDesign Browse Design Skills