Back to skills

core-web-vitals

testing

Diagnoses and fixes Core Web Vitals issues across LCP, INP, and CLS. Covers image preloading, main thread optimization, layout shift prevention, and field measurement with the web-vitals library. Incl

Setup & Installation

npx skills add https://github.com/addyosmani/core-web-vitals --skill core-web-vitals
or paste the link and ask your coding assistant to install it
https://github.com/addyosmani/core-web-vitals
View on GitHub

What This Skill Does

Diagnoses and fixes Core Web Vitals issues across LCP, INP, and CLS. Covers image preloading, main thread optimization, layout shift prevention, and field measurement with the web-vitals library. Includes framework-specific patterns for Next.js, React, and Vue. Lighthouse tells you a metric is bad but not which element or line to fix, this skill maps each metric to the actual code patterns that cause regressions.

When to use it

  • Working with core web vitals functionality
  • Implementing core web vitals features
  • Debugging core web vitals related issues