core-web-vitals
This skill provides a comprehensive guide and code patterns for optimizing Core Web Vitals, specifically Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). It includes debugging scripts, optimization checklists, and framework-specific implementation examples for Next.js, React, and Vue.
Is core-web-vitals safe to install?
Safe to install: our audit of core-web-vitals's source files found 1 shell command, 0 external URLs, no file writes (none risk). Every command and URL listed appears verbatim in the skill's source. The skill provides documentation and code snippets for manual implementation. It does not execute automated changes to files or perform network requests beyond standard browser-based performance monitoring.
How we audit skills: our security review methodology.
Who is this skill for?
Web developers and performance engineers seeking to improve page experience metrics and Google Search rankings.
What can you do with it?
- Improving Largest Contentful Paint (LCP) times
- Reducing Interaction to Next Paint (INP) latency
- Fixing Cumulative Layout Shift (CLS) issues
- Debugging performance bottlenecks using PerformanceObserver
- Implementing framework-specific performance optimizations
How good is this skill?
Quality score: 5/10. The skill is well-structured, provides actionable code examples, and includes clear debugging strategies for all three Core Web Vitals metrics.
What does the skill file contain?
# Core Web Vitals optimization Targeted optimization for the three Core Web Vitals metrics that affect Google Search ranking and user experience. ## The three metrics | Metric | Measures | Good | Needs work | Poor | |--------|----------|------|------------|------| | **LCP** | Loading | ≤ 2.5s | 2.5s – 4s | > 4s | | **INP** | Interactivity | ≤ 200ms | 200ms – 500ms | > 500ms | | **CLS** | Visual Stability | ≤ 0.1 | 0.1 – 0.25 | > 0.25 | Google measures at the **75th percentile** — 75% of page visits must meet "Good" thresholds. --- ## LCP: Largest Contentful Paint LCP measures when the l...
Frequently asked questions
What are the target thresholds for Core Web Vitals?
LCP should be ≤ 2.5s, INP should be ≤ 200ms, and CLS should be ≤ 0.1.
How can I identify the LCP element on my page?
You can use a PerformanceObserver with the 'largest-contentful-paint' type to log the LCP element and its start time to the console.
What is the recommended way to handle long tasks to improve INP?
Break long tasks into smaller chunks and use scheduler.yield() to allow the browser to handle pending input between chunks.
How do I prevent layout shifts caused by images?
Always specify width and height attributes or use the aspect-ratio CSS property to reserve space for images before they load.
Related skills
frontend-design
618.4KAI agents tasked with designing and building web interfaces who need to produce unique, high-quality visual identities rather than generic, templated designs
The frontend-design skill provides guidance for creating distinctive, intentional visual designs for web interfaces. It instructs the agent to act as a design lead at a small studio, focusing on avoiding templated defaults by making deliberate choices regarding typography, color palettes, layout, and motion. The skill emphasizes a structured process of brainstorming, planning, and self-critique before writing code.
supabase-postgres-best-practices
264.3KDevelopers and database administrators working with Postgres and Supabase
This skill provides a structured set of Postgres performance optimization rules and best practices maintained by Supabase. It guides developers in writing, reviewing, and optimizing SQL queries, schema designs, and database configurations.
caveman-compress
224.1KDevelopers and users who want to optimize memory files like CLAUDE
The caveman-compress skill reduces input token usage by rewriting natural language files into a concise, caveman-style format while preserving technical content, code blocks, and file structure.
shadcn
217.3KDevelopers building UI components and design systems using shadcn/ui
The shadcn skill manages UI components and design systems for projects using the shadcn/ui framework. It provides tools to search, add, debug, and style components, while enforcing strict composition and styling rules based on project-specific configuration.