core-web-vitals skill (addyosmani): fix LCP, INP and CLS with measurement first

Makes Claude measure your page first, then fix slow loading (LCP), laggy clicks (INP) and layout shifts (CLS).

Installs: 33K; on skills.sh
Stars: 3K; on GitHub
Files: 3; besides SKILL.md
Updated: Aug 2026; last repo commit

core-web-vitals is a skill from Addy Osmani's web-quality-skills collection. Claude checks real-user data from CrUX when it can, records a browser performance trace, and looks only at the failing metric before it edits code. After the fix it re-runs the same lab test and does not claim a field improvement.

If you give it only source code, it names likely causes but does not say a metric is failing. It reads the performance skill's measurement guide, so install that one with it. It also bundles three guides: LCP, INP and CLS.

Good for

Front-end developers whose pages fail the Core Web Vitals report
Site owners chasing a Search Console warning
SEO and performance teams who want fixes tied to a trace

Install core-web-vitals

Claude Code

Copy this prompt.

Install the core-web-vitals skill in Claude Code. Run this command:

npx skills add addyosmani/web-quality-skills --skill core-web-vitals --skill performance

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

core-web-vitals tells Claude to read the performance skill's MEASUREMENT.md and RUM.md, so the first route installs both. The plugin route installs the whole collection of six skills: accessibility, best-practices, core-web-vitals, performance, seo and web-quality-audit. Its manifest lists no hooks or MCP servers.

From the vendor's docs. Source.

What's in the skill

When it loads

Optimize Core Web Vitals (LCP, INP, CLS) for better page experience using field and lab evidence. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts".

Sections in SKILL.md

Measure before optimizing
The three metrics
LCP: Largest Contentful Paint
Common LCP issues
LCP optimization checklist
LCP element identification
INP: Interaction to Next Paint
CLS: Cumulative Layout Shift
Measurement sources
Framework quick fixes
Next.js
React
Vue/Nuxt
References

Key facts

Author: addyosmani (Addy Osmani)
Repo: addyosmani/web-quality-skills
Installs on skills.sh: 33,000 as of Nov 2, 2026
GitHub stars: 3,022 for the whole addyosmani/web-quality-skills repo, Nov 2, 2026
License: MIT (SKILL.md frontmatter, repo LICENSE and README)
Last repo commit: Aug 24, 2026
What is inside: 4 files including SKILL.md: LCP.md, INP.md and CLS.md guides
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass
Also reads: The performance skill's MEASUREMENT.md and RUM.md, so install performance next to it
Official?: The README calls the collection unofficial
Pass marks (75th percentile): LCP 2.5 s or less, INP 200 ms or less, CLS 0.1 or less

What it includes

Check CrUX data, record a trace, fix, then re-run the same lab test
Four steps. With source code only, Claude names likely causes but does not claim a metric fails.
Try: “Why is LCP slow on https://example.com/pricing?”
Network · Measure before optimizing
LCP, INP and CLS with good, needs-work and poor thresholds
Judged at the 75th percentile of page visits.
The three metrics
Server response, render-blocking CSS, late-found hero image, client-side rendering
Prefers an img with fetchpriority=high; adds a preload only if the trace shows late discovery.
LCP fixes
Prerender the likely next page to make navigations feel instant
Chromium only. Each prerender costs about a full page load, and analytics can fire early.
Write · Speculation Rules
Read when a trace or field data shows a slow interaction
references/INP.md
Read when a trace or field data shows unexpected layout shifts
references/CLS.md
Read when an LCP trace points to discovery, loading or render delay
references/LCP.md
Chrome DevTools trace, CrUX or Search Console, Lighthouse or PageSpeed, first-party RUM
It says not to use the DevTools lighthouse_audit capability for performance.
Runs code · Measurement sources
Short LCP, INP and CLS fixes for Next.js, React and Vue/Nuxt
Try: “Fix the hero image LCP in this Next.js app.”
Write · Framework quick fixes

From the official docs

Permissions

Low risk

Claude edits your site code and may run traces against a URL you give it. Review the diff and re-run the same test after each change.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

Prerendering can fire analytics early
The Speculation Rules tip warns that analytics, ads and load-time code can run when a page is prerendered, not when the visitor arrives. Scope the rules, exclude logout and checkout, and gate side effects. github.com
Fixes can change page behaviour
Changes such as inlined critical CSS, preloads and dynamic imports alter how the page loads. Review the diff and re-run the same lab test. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	SKILL.md defines no read-only mode. Ask Claude to diagnose and report without editing.
Talks to	CrUX, PageSpeed Insights or Lighthouse lookups for the URL you name, when those tools are available
Sign-in and keys	SKILL.md names no credentials or sign-in.
Scopes	Claude edits your site code to apply fixes Claude may record browser traces or run Lighthouse against a URL you give it

Questions

What does the core-web-vitals skill do?

It makes Claude fix the three Core Web Vitals: loading (LCP), responsiveness (INP) and layout jumps (CLS). It measures first, then changes code, then re-measures.

How do I install core-web-vitals?

Use the install box at the top of this page. It installs the performance skill with it, because core-web-vitals tells Claude to read that skill's measurement workflow. The README's plugin route installs all six skills in the collection.

Do I need Chrome DevTools MCP or Lighthouse?

No. The skill prefers a DevTools trace and CrUX data, but its measurement table lists Lighthouse CLI or PageSpeed Insights as the fallback when DevTools tools are unavailable. With source code only, it names likely causes without claiming a metric is failing.

What counts as a good score?

LCP of 2.5 seconds or less, INP of 200 milliseconds or less, and CLS of 0.1 or less. Google measures at the 75th percentile, so 75% of visits must meet those marks.

Will my CrUX numbers improve right after a fix?

No. The skill says to re-run a lab measurement after the fix and not to claim a field improvement, because CrUX and first-party real-user data need new visits.

core-web-vitals vs the performance skill?

core-web-vitals is targeted at LCP, INP and CLS. The README describes performance as the deep dive into loading and runtime speed. core-web-vitals also reads performance's measurement guide, so install both.

Does it work in the Claude app?

The README only suggests adding the skills to your project knowledge or pasting the SKILL.md text. The install box leaves the Claude app tab out because its links to the performance guides would not come along.

Is core-web-vitals safe?

It edits your site code and may use browser traces and lookups for your URLs. One caution: its Speculation Rules tip can run analytics and ads early, so scope the rules and test.

Information

updated Nov 2, 2026

Repository: addyosmani/web-quality-skills
Folder: skills/core-web-vitals

addyosmani/web-quality-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 7

web-quality-skills README · github.com
skills CLI commands · github.com
Codex plugin manifest · github.com
Claude plugin manifest · github.com
core-web-vitals SKILL.md · github.com
performance MEASUREMENT.md · github.com
skills.sh listing · skills.sh