Performancev1.2.01,284 installs

core-web-vitals-audit

Audits a web application for Core Web Vitals regressions. Use when the user asks to check LCP, INP or CLS, investigate a Lighthouse score drop, or review front-end performance before a release.

SchemaLintTrigger

Install

npx skillsify add core-web-vitals-audit

A performance audit is only useful if it names the cause, not the symptom. This skill walks the agent through measuring LCP, INP and CLS, locating the specific element or task responsible for each regression, and reporting a fix anchored to a file and line. It refuses to recommend changes whose effect on a named metric cannot be predicted, which is what keeps its output actionable rather than a checklist of generic advice.

Quality report

Should trigger

Our LCP jumped to 4s after the last deploy, what changed?
Check this page against Core Web Vitals thresholds
Why is my Lighthouse performance score dropping?
The layout jumps around while the page loads
Audit the site speed before we ship on Friday

Should not trigger

Write a SQL migration for a users table
Translate this paragraph into Arabic
What is the capital of France?

Files

SKILL.md

---
name: core-web-vitals-audit
description: Audits a web application for Core Web Vitals regressions. Use when the user asks to check LCP, INP or CLS, investigate a Lighthouse score drop, or review front-end performance before a release.
---

# Core Web Vitals audit

## When to use this
The user reports slow loading, a Lighthouse score drop, visible layout shift, or
wants a performance check before shipping.

## Procedure
1. Identify the entry route and whether it is server-rendered, static or client-rendered.
2. Measure first, guess never. Collect LCP, INP and CLS for the route.
3. Compare each metric against the thresholds in [references/thresholds.md](references/thresholds.md).
4. For every metric outside "good", find the specific cause before proposing a fix:
   - **LCP** — locate the LCP element. Check whether it is discoverable in the initial HTML, whether it is preloaded, and whether a render-blocking resource precedes it.
   - **CLS** — find elements without reserved dimensions, late-loading fonts, and content injected above existing content.
   - **INP** — find long tasks on the main thread and event handlers doing layout-triggering work.
5. Report each finding as: metric, measured value, cause, file and line, concrete fix.

## Rules
- Never report a fix without the measurement that motivated it.
- Never recommend a change whose effect you cannot predict on a named metric.
- Prefer removing work over deferring it.

references/thresholds.md

# Core Web Vitals thresholds

| Metric | Good | Needs improvement | Poor |
| --- | --- | --- | --- |
| LCP | <= 2.5 s | 2.5 s - 4.0 s | > 4.0 s |
| INP | <= 200 ms | 200 ms - 500 ms | > 500 ms |
| CLS | <= 0.1 | 0.1 - 0.25 | > 0.25 |

Thresholds are evaluated at the 75th percentile of page loads, segmented by
device class. A desktop-only measurement is not a pass.

Related skills

TestingVerified

flaky-test-hunter

Finds and diagnoses flaky tests in a test suite. Use when tests pass locally but fail in CI, when a suite fails intermittently, or when the user asks to stabilise or de-flake their tests.

963 installs · v1.1.0

SecurityVerified

dependency-risk-review

Reviews third-party dependencies for supply-chain and licence risk. Use when the user asks to audit dependencies, evaluate whether to add a package, review a lockfile diff, or check licence compatibility.

741 installs · v1.0.3

RefactoringVerified

rtl-layout-audit

Audits a web interface for right-to-left layout correctness in Arabic, Hebrew, Persian or Urdu. Use when adding an RTL locale, when the user reports mirrored or broken Arabic layout, or before shipping a bilingual interface.

688 installs · v1.1.1