core-web-vitals

Optimize LCP, INP, and CLS metrics in web projects.

7|2|Updated Jun 30, 2025
One-click install
npx skills add https://github.com/hq-opensource/predictive-control --skill core-web-vitals-hq-opensource
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/hq-opensource/predictive-control/tree/main/.agent/skills/core-web-vitals
Command: npx skills add https://github.com/hq-opensource/predictive-control --skill core-web-vitals-hq-opensource

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Optimize Core Web Vitals (LCP, INP, CLS) to improve page experience and search ranking.

Core Features & Use Cases

  • LCP, INP, and CLS optimization guidance to reduce render delays and layout shifts.
  • Framework-specific tips for Next.js, React, and Nuxt to implement speed improvements.
  • Measurement and debugging guidance using web-vitals and lab/field tooling to monitor performance.
  • Use cases include improving first contentful paint timing, interactivity, and visual stability on content-rich pages.

Quick Start

Audit a page for LCP, INP, and CLS issues and apply the provided optimization patterns to improve Core Web Vitals.

Frequently Asked Questions about core-web-vitals

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

FAQPage Schema
How do I optimize Core Web Vitals for LCP, INP, and CLS?▼

To optimize Core Web Vitals, apply targeted patterns to reduce LCP render delays, improve INP interactivity, and stabilize CLS layout shifts. This Skill provides measurement, debugging, and framework-specific optimization guidance to accelerate load performance.

What is the best way to improve Next.js page load performance and interactivity?▼

The best way to improve Next.js page load performance is to apply framework-specific optimization patterns for LCP, INP, and CLS. This Skill provides actionable tips for Next.js to reduce render delays and stabilize visual layout.

How do I debug layout shifts and poor interactivity in real-world scenarios?▼

Debug layout shifts and poor interactivity by using web-vitals libraries alongside lab and field tooling. This Skill guides you through measuring and debugging Core Web Vitals to monitor performance issues in real-world scenarios.

Does this Core Web Vitals optimization guidance work with React and Nuxt?▼

Yes, this Core Web Vitals optimization guidance provides framework-specific tips for React and Nuxt. You can implement speed improvements to accelerate load performance and enhance interactivity across these modern web projects.

Why does my content-rich page have slow first contentful paint timing?▼

Slow first contentful paint timing occurs due to render delays affecting your LCP. This Skill helps you audit content-rich pages and apply optimization patterns to improve first contentful paint timing and overall page experience.