What is the benefit of the will-change audit?

The audit identifies elements where will-change is overused (wasting GPU memory) or underused on animated elements (causing potential jank during the start of a transition).

Can it differentiate between CSS and JavaScript animations?

Yes, it identifies CSSTransitions, CSSAnimations, and WebAnimations (JS) and analyzes their specific timing functions, durations, and animated properties.

Do I need a specific browser to use this skill?

Yes, this skill requires a Chromium-based browser to access specific Chrome DevTools Protocol (CDP) domains like Animation and LayerTree.

How does this skill detect animation jank?

It uses a combination of requestAnimationFrame hooks to measure frame duration and the Long Animation Frame (LoAF) API to identify specific scripts and tasks causing rendering delays.

Animation Profiler

Name: Animation Profiler
Author: anouar1991

byanouar1991

•

Analytics & Monitoring

Analyzes and optimizes web animations by profiling frame rates, identifying expensive layout triggers, and detecting performance jank.

The Animation Profiler is a comprehensive diagnostic tool for web developers seeking to achieve 60 FPS fluidity. It leverages the Chrome DevTools Protocol (CDP) and Playwright to capture deep metrics on CSS and JavaScript animations, including frame timing, layer tree composition, and will-change property usage. By identifying 'heavy' animations that trigger layout or paint cycles instead of relying on the compositor, this skill helps developers pinpoint exactly where performance bottlenecks occur and provides actionable data to eliminate stutter and improve the user experience across all devices.

Key Features

01Real-time frame rate (FPS) and dropped frame monitoring via requestAnimationFrame

02Deep CDP integration for detailed CSS and Web Animation API inspection

03Comprehensive will-change CSS property audit for GPU memory optimization

04Long Animation Frame (LoAF) observation to pinpoint script-based jank

05Automated detection of layout-triggering vs. compositor-only properties

061 GitHub stars

Use Cases

01Optimizing mobile web performance by reducing GPU memory overhead

02Debugging stuttering or janky UI transitions on complex web applications

03Pre-launch performance auditing to ensure smooth user interactions and high-quality UX

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add anouar1991/binarypetsclaude animation-profiler

For use in Claude.ai and ChatGPT

Download Skill