skills.rest
FlorianBruniaux
FlorianBruniauxCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

core-web-vitals

Identify and optimize LCP, INP, and CLS metrics in Next.js and React projects.

77|3|Updated Mar 24, 2026
Search Tags:#performance#frontend#web-vitals#lcp#inp#cls
One-click install
npx skills add https://github.com/FlorianBruniaux/starmapper --skill core-web-vitals-florianbruniaux
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/FlorianBruniaux/starmapper/tree/main/.agents/skills/core-web-vitals
Command: npx skills add https://github.com/FlorianBruniaux/starmapper --skill core-web-vitals-florianbruniaux

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Poor Core Web Vitals degrade user experience and search rankings, causing slower, less stable pages and frustrated users.

Core Features & Use Cases

  • LCP optimization checklist to reduce loading time for largest contentful elements.
  • INP improvements to shorten input-to-interactivity delays and improve responsiveness.
  • CLS stabilization strategies to prevent layout shifts and maintain visual stability across devices.
  • Measurement, debugging, and framework guidance for Next.js and React to apply fixes in real-world projects.

Quick Start

Run a Core Web Vitals audit on your page and apply the LCP, INP, and CLS optimizations described here.

Frequently Asked Questions about core-web-vitals

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

FAQPage Schema
How do I improve Core Web Vitals for faster page speed?▼

Optimize Core Web Vitals by applying a practical checklist: reduce loading time for LCP elements, shorten input-to-interactivity delays for INP, and prevent layout shifts using CLS stabilization strategies to boost page speed and search rankings.

What's the best way to reduce LCP loading time in a React project?▼

Reduce LCP loading time in React by applying framework-specific optimization patterns that target the largest contentful elements, decreasing their load duration and improving overall page speed and user experience.

How does INP affect web responsiveness and how can I optimize it?▼

INP measures input-to-interactivity delays affecting web responsiveness; optimize it by applying specific improvement patterns that shorten response times, ensuring faster page interactions and a smoother user experience across devices.

Can I use web-vitals integration to measure and debug CLS in Next.js?▼

Yes, you can use web-vitals integration to measure and debug CLS in Next.js, applying framework-specific guidance to identify layout shifts and implement stabilization strategies for visual stability across devices.

Why does poor visual stability impact search rankings and how do I fix it?▼

Poor visual stability from layout shifts degrades user experience and search rankings; fix it by applying CLS stabilization strategies that prevent layout shifts, maintaining visual stability across devices and boosting page performance.

Related Skills

Explore More Software Engineering Skills→
rodrigotoledorodrigotoledo

core-web-vitals

Optimize LCP, INP, and CLS metrics using web-vitals and Lighthouse.

Community
Intermediate
idchain-worldidchain-world
16

vercel-react-best-practices

Apply performance best practices to React and Next.js components and pages.

Official
Advanced
AlvaGonzAlvaGonz

core-web-vitals

Identify and optimize LCP, INP, and CLS metrics in frontend projects.

Community
Advanced
oscardlfroscardlfr
1

core-web-vitals

Optimize Core Web Vitals metrics LCP, INP, and CLS for performance and SEO.

Community
Intermediate