skills.rest
ricable
ricableCOMMUNITY
Explore all skills by this author →
GitHub

core-web-vitals

Diagnose and fix LCP, INP, and CLS issues across React, Next.js, Vue, Nuxt, and Astro sites.

Updated Feb 15, 2026
Search Tags:#performance optimization#core web vitals#frontend debugging#lcp#page experience#inp#cls
One-click install
npx skills add https://github.com/ricable/mcai --skill core-web-vitals-ricable
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/ricable/mcai/tree/main/.agents/skills/core-web-vitals
Command: npx skills add https://github.com/ricable/mcai --skill core-web-vitals-ricable

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you diagnose and fix the loading, responsiveness, and visual stability issues that hurt user experience, conversion rates, and search visibility.

Core Features & Use Cases

  • LCP Optimization: Improve the time it takes for the main content to appear by reducing server latency, preloading critical assets, and removing render-blocking resources.
  • INP Optimization: Make pages feel faster by shortening long tasks, streamlining event handlers, and reducing main-thread contention.
  • CLS Prevention: Eliminate unexpected layout shifts by reserving space for media, stabilizing fonts, and avoiding layout-changing animations.
  • Use Case: Use this Skill when a product page is slow to load, a dashboard feels laggy after clicks, or content jumps around during rendering.

Quick Start

Ask for a Core Web Vitals audit of your page and request prioritized fixes for LCP, INP, and CLS.

Frequently Asked Questions about core-web-vitals

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

FAQPage Schema
How do I fix a high LCP and improve page loading speed?▼

To fix a high LCP, reduce server latency, preload critical assets, and remove render-blocking resources. This optimization improves the time it takes for main page content to appear during frontend audits.

What is the best way to reduce INP and make my web page feel faster?▼

Reducing INP requires shortening long tasks, streamlining event handlers, and minimizing main-thread contention. This responsiveness optimization makes page interactions feel faster by addressing event handler delays.

Why does my page content jump around during rendering and how do I prevent it?▼

Content jumps during rendering due to unexpected layout shifts. Prevent CLS by reserving space for media dimensions, stabilizing font loading, and avoiding layout-changing animations to ensure visual stability.

Does this Core Web Vitals optimization approach work with Next.js and Astro?▼

Yes, this Core Web Vitals optimization applies to Next.js and Astro sites, alongside React, Vue, and Nuxt. It supports frontend debugging workflows across these frameworks to resolve page experience regressions.

How do I perform a Core Web Vitals audit for my website?▼

Perform a Core Web Vitals audit by requesting an evaluation of your page's LCP, INP, and CLS metrics. The audit outputs prioritized fixes for loading, responsiveness, and visual stability issues.

Related Skills

Explore More Software Engineering Skills→
JochenYangJochenYang
21

performance-optimizer

Identify performance bottlenecks and optimize application speed across backend, database, and frontend workflows.

Community
Intermediate
Oscar-Ivan-SalasOscar-Ivan-Salas

performance-profiling

Profile web application performance with Lighthouse and DevTools workflows.

Community
Advanced
aporto-techaporto-tech

seo-audit

Identify SEO issues across on-page elements, technical factors, and content quality.

Official
Advanced
tuliopc23tuliopc23

axiom-hang-diagnostics

Diagnose application hangs by identifying main thread blocking with profiling tools.

Community
Advanced