skills.rest
RodrigoTomeES
RodrigoTomeESCOMMUNITY
Explore all skills by this author →
Website𝕏@RodrigoTomeESGitHub

core-web-vitals

Diagnose and reduce LCP, INP, and CLS regressions in web applications.

12|3|Updated Feb 17, 2026
Search Tags:#web performance#core web vitals#lcp#page speed#inp#cls#layout shift
One-click install
npx skills add https://github.com/RodrigoTomeES/getmcp --skill core-web-vitals-rodrigotomees
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/RodrigoTomeES/getmcp/tree/main/.agents/skills/core-web-vitals
Command: npx skills add https://github.com/RodrigoTomeES/getmcp --skill core-web-vitals-rodrigotomees

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps improve user experience and search visibility by reducing the performance issues that hurt Core Web Vitals scores, especially slow loading, delayed interactions, and unexpected layout shifts.

Core Features & Use Cases

  • LCP Optimization: Find and fix slow hero content, render-blocking CSS, delayed image loading, and server response bottlenecks.
  • INP Optimization: Reduce main-thread blocking, expensive event handlers, and third-party script interference that makes pages feel unresponsive.
  • CLS Optimization: Prevent visual instability by reserving space for images, ads, embeds, and dynamic content.
  • Use Case: A product page with a slow hero image, heavy client-side rendering, and shifting elements can be audited and improved with targeted recommendations for each metric.

Quick Start

Ask the Skill to review your page and recommend concrete 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 speed for my web application?▼

To fix high LCP and improve page speed, diagnose slow hero content, render-blocking CSS, delayed image loading, and server response bottlenecks. The Skill provides targeted remediation guidance to reduce these Largest Contentful Paint regressions.

Why does my page have layout shift issues and how can I prevent CLS regressions?▼

Layout shift issues happen when space is not reserved for dynamic content. Prevent CLS regressions by reserving dimensions for images, ads, and embeds before they load, ensuring visual stability across your web pages.

What is the best way to reduce INP and main-thread blocking in Next.js or React?▼

The best way to reduce INP in frameworks like Next.js or React is to minimize JavaScript main-thread work, optimize expensive event handlers, and reduce third-party script interference. This makes pages feel highly responsive.

Can I use this to optimize Core Web Vitals across Vue, Nuxt, and Astro projects?▼

Yes, you can optimize Core Web Vitals across Vue, Nuxt, and Astro projects. The Skill applies page-speed, responsiveness, and layout-stability remediation guidance universally across these web frameworks.

What causes delayed interactions on my website and how do I debug INP?▼

Delayed interactions are caused by heavy JavaScript main-thread blocking and expensive event handlers. Debug INP by auditing third-party script interference and optimizing client-side rendering tasks to restore responsiveness.

Related Skills

Explore More Software Engineering Skills→
daveiodaveio

web-perf

Measure Core Web Vitals and detect render-blocking resources with Chrome DevTools MCP.

Community
Intermediate
aroidoaroido

Web Vitals Monitoring Skill

Measure Core Web Vitals and enforce performance budgets in CI/CD pipelines.

Official
Advanced
musher-devmusher-dev

auditing-page-velocity

Audit marketing page performance against Core Web Vitals and perceived performance patterns.

Official
Intermediate
grvpanchalgrvpanchal
1

server-ssr

Coordinates SSR HTML generation, hydration, and data fetching for Next.js and Express applications.

Community
Advanced