skills.rest
anouar1991
anouar1991COMMUNITY
Explore all skills by this author →
GitHub

animation-profiler

Profile CSS and JavaScript animations for performance issues via CDP.

1|Updated Jan 9, 2026
Search Tags:#profiling#animation#playwright#cdp#web-performance#frame-timing
One-click install
npx skills add https://github.com/anouar1991/binaryPetsClaude --skill animation-profiler
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animation-profiler
Source: https://github.com/anouar1991/binaryPetsClaude/tree/main/plugins/playwright-toolkit/skills/animation-profiler
Command: npx skills add https://github.com/anouar1991/binaryPetsClaude --skill animation-profiler

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Profile CSS and JS animations to identify performance issues, enabling quicker diagnosis and optimization.

Core Features & Use Cases

  • Enumerate active animations via the CDP Animation domain and collect timing data.
  • Audit will-change usage and categorize properties into compositor, paint, and layout-triggering.
  • Use cases include pre-launch profiling, debugging jank in complex UIs, and ensuring smooth frame rates.

Quick Start

Trigger the profiler on a page with visible animations using Playwright MCP and collect the resulting data.

Frequently Asked Questions about animation-profiler

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I profile CSS and JavaScript animations to diagnose jank?▼

To profile CSS and JavaScript animations, this Skill enumerates active animations via the CDP Animation domain and collects frame timing data to pinpoint performance issues causing jank. It audits will-change usage and categorizes properties into compositor, paint, and layout-triggering.

Why does my web page animation drop frames in Chromium-based browsers?▼

Animation frame drops in Chromium-based browsers are detected by this Skill using PerformanceObserver and CDP LayerTree data. It identifies performance issues by analyzing frame timing and auditing will-change properties that trigger layout or paint instead of compositor optimization.

Do I need Playwright to collect CDP Animation and frame timing data?▼

Yes, you need a Playwright MCP server and a Chromium-based browser to collect CDP Animation, LayerTree, and PerformanceObserver data. The profiler must be triggered on a page containing visible animations to enable this data collection.

How do I audit will-change usage for complex UI animations?▼

To audit will-change usage for complex UI animations, this Skill categorizes properties into compositor, paint, and layout-triggering types. It applies the analysis directly to web pages with visible animations to detect inefficient property usage.

What's the best way to debug frame drops before a web app launch?▼

The best way to debug frame drops before launch is to trigger this profiler on a page with visible animations using Playwright MCP. It collects CDP Animation and LayerTree data to ensure smooth frame rates and identify jank in complex UIs.

Can I use this profiler on pages without visible animations?▼

No, this profiler requires a page containing visible animations to enable CDP Animation, LayerTree, and PerformanceObserver data collection. Without active CSS or JavaScript animations, there is no frame timing data to analyze for jank or will-change usage.

Related Skills

Explore More Software Engineering Skills→
pacphipacphi
14

playwright

Automate browser interactions and screenshots via Playwright MCP on a VNC display.

Community
Advanced
CrazySwamiCrazySwami
5

gsap-animations

Create GSAP animations with ScrollTrigger and reduced-motion fallbacks.

Community
Intermediate
telum-aitelum-ai
2

visual-testing-web

Run visual regression tests across breakpoints and states with Playwright.

Official
Intermediate
MohammedSaudAlsahliMohammedSaudAlsahli

web-perf

Audit web performance using Chrome DevTools profiling tools and Core Web Vitals.

Community
Advanced