Which browsers are supported for this audit?

This skill requires a Chromium-based browser (like Chrome or Edge) to access advanced PerformanceObserver features such as element attribution and interaction IDs.

Can I test responsive designs with this tool?

Yes, the skill automatically cycles through mobile, tablet, and desktop viewports to ensure performance is consistent and optimized across all device categories.

What metrics are included in the final report?

The report includes LCP (with element ID and size), CLS (with shift sources), and INP (with event timing breakdowns like input delay and processing time).

Does this skill measure real-user data (RUM)?

No, it performs synthetic audits by automating a browser instance, providing controlled and reproducible performance metrics during the development or QA phase.

How does it identify the cause of layout shifts (CLS)?

It captures specific layout-shift sources, identifying the DOM nodes that moved and their previous/current coordinates to help you pinpoint unstable elements.

Core Web Vitals Audit

Name: Core Web Vitals Audit
Author: anouar1991

byanouar1991

•

Security & Testing

Audits website performance by measuring Core Web Vitals across multiple viewports with detailed element-level attribution.

The Core Web Vitals Audit skill enables Claude to perform comprehensive performance analysis of web pages using Playwright and Chromium. By automating browser interactions and leveraging the PerformanceObserver API, it captures precise metrics for Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). The skill automatically tests across mobile, tablet, and desktop breakpoints, identifying specific DOM elements causing performance bottlenecks and providing annotated screenshots for visual debugging, making it an essential tool for frontend optimization and pre-release performance validation.

Key Features

011 GitHub stars

02Automated multi-viewport performance testing (Mobile, Tablet, Desktop)

03Real-world Interaction to Next Paint (INP) measurement via simulated user behavior

04Visual debugging with annotated screenshots of performance bottlenecks

05Comprehensive report cards based on official Google Web Vitals thresholds

06Deep attribution for LCP and CLS to specific DOM elements

Use Cases

01Debugging layout shifts (CLS) by pinpointing the exact elements causing visual instability

02Optimizing interaction responsiveness (INP) by analyzing event timing and processing delays

03Validating page performance and identifying regressions before production deployments

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add anouar1991/binarypetsclaude core-web-vitals-audit

For use in Claude.ai and ChatGPT

Download Skill