What is the Core Web Vitals skill?
The Core Web Vitals skill is a SKILL.md in web-quality-skills. It tells an AI coding agent to check CrUX at p75, record a trace, analyze only the insights for the failing metric, fix the implicated code and re-measure. It lists the good thresholds for LCP, INP and CLS and warns not to promise instant field gains.
This is the core-web-vitals folder of addyosmani/web-quality-skills. It is a specialized skill for the three metrics that describe loading, responsiveness and visual stability, with a measure-first workflow.
The README says Google uses Core Web Vitals in its page-experience systems, but that a passing score does not guarantee search ranking outcomes. The skill keeps that distinction in its guidance.
What changes in your agent's output
- The agent checks page-level CrUX at p75 first, with a clearly labeled origin fallback when page data is missing.
- It records a trace under stated conditions, then analyzes only the insights tied to the failing metric.
- After the fix it re-runs equivalent lab measurements and does not claim an immediate field improvement, since CrUX needs new visits.
- The LCP element is identified before any optimization is chosen.
- Speculation rules are described with their eagerness levels and the side effects of prerendering.
What the skill covers
Thresholds: LCP at or under 2.5 s, INP at or under 200 ms, CLS at or under 0.1, with needs-work and poor bands. Separate sections handle LCP, INP and CLS, a table of measurement sources, and quick fixes for Next.js, React and Vue or Nuxt. Reference files go deeper on each metric.
Who the Core Web Vitals skill is for
Best for
- Pages that fail a Core Web Vitals assessment in CrUX or Search Console.
- Debugging one metric with traces rather than guessing.
- Pairing with the broader web performance skill and with vercel-react-best-practices on React apps.
Not for
- Pages with no traffic data. The skill can still trace, but field claims need CrUX or monitoring.
- Cross-category audits. Use the web quality audit skill for that.
Use it with UiChemy
Layout shift and a slow hero image are common in generated pages. After UiChemy places a design in WordPress, run this skill on the live URL and fix the failing metric in the editor. Click Get Started on uichemy.com.
How to install Core Web Vitals Skill: Fix LCP, INP and CLS With AI Agents
git clone https://github.com/addyosmani/web-quality-skills.gitClone the repository
Run
git clone https://github.com/addyosmani/web-quality-skills.git. Each skill is a folder inside the skills directory, and core-web-vitals is skills/core-web-vitals.Copy the skill folder
Copy skills/core-web-vitals into the folder where your agent loads skills, for one project or globally. The README's manual route copies the whole skills directory, which keeps the cross-links between the sibling skills working. Copy the folder as a whole, because SKILL.md links to LCP, INP and CLS detail files in references.
Add live browser tools if you have them
The README says the skills prefer Chrome DevTools MCP for traces and Lighthouse runs when your agent exposes it. Without it they fall back to the Lighthouse CLI, PageSpeed Insights and manual checks.
Ask in plain words
Skills activate when your request matches their description, for example by asking for a quality review of a page.
Check that it loaded
Ask the agent to fix a slow LCP. It should check CrUX or a trace first, name the LCP element, change only what the trace points to, and refuse to claim an immediate field improvement.
Key features
- Measure-before-optimizing stepsCrUX p75 first, then a trace, then focused insights, then the fix and an equivalent re-measure.
- Threshold tableLCP, INP and CLS with good, needs-work and poor bands.
- LCP sectionNames the elements that can be LCP, such as images, video, large text blocks, backgrounds and SVG, with an optimization checklist and element identification.
- Speculation rules guidanceDocuments conservative, moderate, eager and immediate eagerness, plus bandwidth cost, early side effects and Chromium-only support.
- INP and CLS sectionsDedicated guidance for slow interactions and unexpected layout shifts.
- Measurement sources tableCompares browser traces, CrUX or Search Console, Lighthouse or PageSpeed Insights, first-party monitoring and a raw PerformanceObserver.
- Framework quick fixesShort fixes for Next.js, React and Vue or Nuxt.
- Reference filesreferences/LCP.md, INP.md and CLS.md are read only when a trace points to that metric.
- No false promisesDoes not claim a field improvement straight after a fix and does not tie a pass to ranking.
- Search Console linkUses CrUX or Search Console to prioritize aggregated real-user outcomes.
Frequently asked questions
What is the Core Web Vitals skill?
It is the core-web-vitals folder in addyosmani/web-quality-skills. It guides an AI coding agent to diagnose LCP, INP and CLS with CrUX and trace evidence, change only implicated code, and verify with an equivalent lab run.
How do I install it without npx?
Clone the repository with git and copy skills/core-web-vitals into the folder your agent reads for skills, keeping its references folder. Or copy the whole skills directory so the sibling performance skill is available too.
What thresholds does it use?
Good LCP is at or under 2.5 seconds, good INP at or under 200 milliseconds and good CLS at or under 0.1. Poor is above 4 seconds, 500 milliseconds and 0.25. Field assessment is at the 75th percentile, not a single lab run.
Will fixing Core Web Vitals raise my rankings?
The skill does not promise it. It says Google uses the metrics in page-experience systems, but a passing score does not guarantee ranking outcomes. It treats the fix as a user-experience improvement verified by measurement.
Why does it not report instant field improvement?
CrUX and first-party monitoring need new user visits to reflect a change. After a fix the agent re-runs equivalent lab measurements and reports field verification as pending until enough new data arrives.
How does it relate to the performance skill?
This skill is narrow: three metrics, trace-driven. The performance skill covers server response, images, fonts, caching, scripts and runtime. Many teams run this first for a failing metric, then performance for the rest.
What license does it use?
The repository is MIT licensed and the SKILL.md frontmatter says MIT. The 28.4K install count on this page comes from a third-party skills listing, not from the repository. The repository README and SKILL.md linked in the sources section are the authority for details.