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

core-web-vitals-audit

Audit Core Web Vitals across mobile, tablet, and desktop viewports.

1|Updated Jan 9, 2026
Search Tags:#playwright#performance-testing#core-web-vitals#lcp#inp#cls
One-click install
npx skills add https://github.com/anouar1991/binaryPetsClaude --skill core-web-vitals-audit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: core-web-vitals-audit
Source: https://github.com/anouar1991/binaryPetsClaude/tree/main/plugins/playwright-toolkit/skills/core-web-vitals-audit
Command: npx skills add https://github.com/anouar1991/binaryPetsClaude --skill core-web-vitals-audit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Performance engineers need reliable, multi-viewport CWV measurements with detailed attribution and visual context to diagnose and improve page load and interactivity.

Core Features & Use Cases

  • Instrument page load using PerformanceObserver-based CWV tracking to capture LCP, CLS, and INP with element attribution and per-viewport context.
  • Drive realistic interactions across mobile, tablet, and desktop to generate representative metrics and annotated screenshots for debugging.
  • Produce a cross-viewport report card with pass/fail grades and actionable insights for optimization and release readiness.

Quick Start

Run this skill against a target URL to generate a CWV audit across mobile, tablet, and desktop and output a structured report.

Frequently Asked Questions about core-web-vitals-audit

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

FAQPage Schema
How do I measure Core Web Vitals across mobile, tablet, and desktop viewports?▼

You can measure Core Web Vitals across mobile, tablet, and desktop viewports by running an automated audit that installs PerformanceObserver-based trackers to capture LCP, INP, and CLS with element-level attribution for each screen size.

What is element-level attribution for Core Web Vitals and how does it help debugging?▼

Element-level attribution for Core Web Vitals identifies the exact DOM elements responsible for poor LCP, INP, and CLS scores, enabling precise debugging by pinpointing specific page components causing performance bottlenecks.

Can I use Playwright to automate interaction-driven Core Web Vitals testing?▼

Yes, you can use Playwright to automate interaction-driven Core Web Vitals testing by driving realistic page interactions across viewports to generate representative INP metrics and capture annotated screenshots for debugging.

How do I generate a visual performance report card for LCP, INP, and CLS?▼

You generate a visual performance report card for LCP, INP, and CLS by auditing a target URL across multiple viewports, which produces a structured results object with per-viewport metrics, pass/fail grades, and annotated screenshots.

What's the best way to audit Core Web Vitals for release readiness?▼

The best way to audit Core Web Vitals for release readiness is to run a cross-viewport audit that collects LCP, INP, and CLS metrics, applies pass/fail grades, and provides actionable optimization insights for the target URL.

Related Skills

Explore More Software Engineering Skills→
lyh2lyh2

setup-browser-cookies

Import and decrypt Chromium cookies into a Playwright headless context.

Community
Intermediate
mizchimizchi
320

performance-expert

Analyze bundle health and Core Web Vitals signals to identify frontend performance bottlenecks.

Community
Advanced
matteocervellimatteocervelli
25

e2e-test-writer

Generate Playwright end-to-end tests using the page object model.

Community
Advanced
adityaarsharmaadityaarsharma
2

orbit-seo-page-speed

Fetch and compare Core Web Vitals from Google PageSpeed Insights with local Lighthouse scores.

Community
Intermediate