Skip to main content
affpapa.org
RU EN
skill

core-web-vitals · davila7 — Claude Code skill: metrics and setup

This skill examines LCP, INP, and CLS and suggests code changes for loading, responsiveness, and layout stability. Use it when diagnosing weak page metrics.

Install into Claude Code · claude-code-templates All methods and platforms ↓ 
npx claude-code-templates@latest --skill development/core-web-vitals
Open on GitHub

What core-web-vitals does

The skill covers three Core Web Vitals: LCP for when the main visible content appears, INP for responses to user actions, and CLS for unexpected layout movement. It connects each metric to common code-level causes and suggests changes, such as prioritizing a key image, splitting long tasks, or reserving space for images.

For LCP, the guidance discusses slow server responses, render-blocking resources, and client-side rendering delays. INP examples cover long main-thread tasks, costly event handlers, third-party scripts, and unnecessary React or Vue re-renders. The examples include HTML and JavaScript; the recommended fixes depend on which metric is affected.

What it helps with

  • trace delays in rendering the main visible element
  • reduce lag after clicks and other interactions
  • identify causes of unexpected layout movement
  • choose code changes for LCP, INP, or CLS

Example prompts for the agent

  • Find why the main content appears late and suggest ways to improve LCP.
  • Inspect what makes clicks feel delayed and recommend changes for INP.
  • Look for causes of unexpected page shifts and suggest ways to reduce CLS.

How to install core-web-vitals

1claude-code-templates

npx claude-code-templates@latest --skill development/core-web-vitals

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill core-web-vitals -a claude-code

3Manually: put the files in place

~/.claude/skills/core-web-vitals/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/core-web-vitals/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about core-web-vitals

How do I install core-web-vitals in Claude Code?

Run npx claude-code-templates@latest --skill development/core-web-vitals.

What does core-web-vitals do?

It helps diagnose LCP, INP, and CLS issues and suggests code changes for common causes of poor results.

Which INP issues does core-web-vitals cover?

It discusses long main-thread tasks, costly event handlers, third-party scripts, and excessive re-renders.

Similar skills

All skills for Frontend and UI →

core-web-vitals by other authors comes first.

core-web-vitals web-quality-skills A skill that measures first, then fixes LCP, INP and CLS. Handy when a page loads slowly or the layout jumps around. CX Codex +1 32,000installs core-web-vitals kostja94 This skill diagnoses LCP, INP, and CLS problems and turns them into prioritized fixes. Use it when page performance or technical SEO needs a closer look. CX Codex +1 1,100installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set495

The whole set →
accessibility This skill guides Claude Code through web accessibility reviews based on WCAG 2.1. Use it to inspect keyboard access, screen reader support, and interface elements. 325installs domain-name-brainstormer Generates domain name ideas for your project and checks which ones are free across several TLDs. Handy when you are naming a new product or rebranding. 321installs react-patterns Get guidance on React components, hooks, state choices, and performance. Useful when building or refactoring a React interface with TypeScript. 321installs firebase This skill guides Firebase backend work across auth, databases, functions, storage, and hosting. Use it before choosing a data model or access rules. 321installs context-window-management A skill for handling LLM context windows: summarization, trimming, routing and fighting context rot. Useful when a long dialogue runs into the token limit. 309installs documentation-templates This skill provides outlines and templates for READMEs, API references, code comments, and project records. Use it when starting documentation or bringing existing pages into a clearer structure. 305installs unity-project-setup Scaffolds a standardized Unity project with structured Assets directories, URP configs, core C# managers, and Git LFS tracking via Claude Code. 303installs agent-memory-mcp This skill runs an MCP server that gives your agent long-term memory: it stores decisions, architecture notes and patterns, then finds them again by search. 300installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor