How does it help with interaction responsiveness (INP)?

It provides strategies for breaking up long tasks, using React transitions (useTransition), and yielding to the main thread to ensure the browser can respond quickly to user input.

Can this skill help with Real User Monitoring (RUM)?

Yes, it provides code snippets and best practices for integrating the 'web-vitals' library to collect and send field data to your analytics endpoint.

Which metrics does the Core Web Vitals skill cover?

The skill focuses on the three primary Core Web Vitals: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).

Does this skill prepare for future Google algorithm updates?

Yes, it includes specialized guidance and implementation patterns for the stricter 2026 thresholds (Q4 2025 rollout) to help maintain search rankings.

Core Web Vitals Performance Optimizer

Name: Core Web Vitals Performance Optimizer
Author: yonatangross

byyonatangross

•

分析と監視

Optimizes web performance for LCP, INP, and CLS using 2026 thresholds and real-user monitoring implementation patterns.

This skill equips Claude with the specific knowledge and code patterns required to diagnose and resolve performance regressions across Google's Core Web Vitals metrics. It provides expert guidance on reducing Largest Contentful Paint (LCP) through server-side rendering and resource prioritization, improving Interaction to Next Paint (INP) by yielding the main thread, and eliminating Cumulative Layout Shift (CLS) through stable layout techniques. By incorporating the stricter 2026 thresholds, this skill helps developers future-proof their web applications for upcoming search engine ranking updates.

主な機能

01INP Responsiveness & Task Yielding

02CLS Prevention & Layout Stability

032026 Metric Threshold Alignment

0469 GitHub stars

05LCP Resource Prioritization & Preloading

06Real User Monitoring (RUM) Integration

ユースケース

01Diagnosing and fixing Core Web Vitals regressions

02Setting and enforcing performance budgets in CI/CD

03Optimizing React 18+ interaction responsiveness

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/orchestkit core-web-vitals

For use in Claude.ai and ChatGPT

Download Skill