webperf-core-web-vitals

webperf-core-web-vitals is a skill for Claude Code, Codex from nucliweb/webperf-snippets. It costs 113 tokens per session (3,077 once invoked), scanned A, original, MIT.

A browser-based toolkit for measuring Core Web Vitals, which are standard signals for how quickly a page loads, stays visually stable, and responds to input. It measures LCP, CLS, and INP and guides follow-up debugging.

In plain words
What is it for?
Use it to audit Core Web Vitals, investigate slow Largest Contentful Paint (LCP), layout shifts, or interaction delays, and inspect loading details such as server response and rendering time.
Why use it?
It helps identify whether a website feels slow, shifts while loading, or responds late to clicks and other interactions. The guided checks help narrow down possible causes after a measurement.

Skill for Claude CodeCodex

About the project

WebPerf Snippets is a collection of JavaScript snippets that run in browser developer tools to measure and debug website performance. It helps developers investigate Core Web Vitals, loading, interaction responsiveness, images, video, scripts, and other performance issues. Its catalogue skills, setting, and instruction support agent-assisted use of the snippets.

nucliweb/webperf-snippets · 1,445 stars · on GitHub

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/nucliweb/webperf-snippets/webperf-core-web-vitals
Any agent
npx skills add nucliweb/webperf-snippets --skill webperf-core-web-vitals
Clone the repo
git clone --depth 1 https://github.com/nucliweb/webperf-snippets

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for webperf-core-web-vitals

README.md
[![agentmods](https://agentmods.dev/badge/skills/nucliweb/webperf-snippets/webperf-core-web-vitals.svg)](https://agentmods.dev/skills/nucliweb/webperf-snippets/webperf-core-web-vitals)
Your own site
<a href="https://agentmods.dev/skills/nucliweb/webperf-snippets/webperf-core-web-vitals"><img src="https://agentmods.dev/badge/skills/nucliweb/webperf-snippets/webperf-core-web-vitals.svg" alt="Measured on agentmods" height="20"></a>
Per session 113 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,077 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00113 $0.03077
Opus 5 $0.00056 $0.01538
Sonnet 5 $0.00023 $0.00615
Haiku 4.5 $0.00011 $0.00308

Measured 5d ago against content hash 6e492e43d268, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

webperf-core-web-vitals scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.

The scan reads SKILL.md. This mod also ships 7 executable files (scripts/CLS.js, scripts/INP.js, scripts/LCP-Image-Entropy.js, …), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.claude/skills/webperf-core-web-vitals/SKILL.md · 236 lines

How it starts

The opening of the file, as written. The whole thing — 236 lines — stays where its author put it; the contents beside it link to each section on GitHub.

WebPerf: Core Web Vitals

JavaScript snippets for measuring web performance in Chrome DevTools. Execute with mcp__chrome-devtools__evaluate_script, capture output with mcp__chrome-devtools__get_console_message.

Scripts

  • scripts/CLS.js — Cumulative Layout Shift (CLS)
  • scripts/INP.js — Interaction to Next Paint (INP)
  • scripts/LCP-Image-Entropy.js — LCP Image Entropy
  • scripts/LCP-Subparts.js — LCP Subparts
  • scripts/LCP-Trail.js — LCP Trail
  • scripts/LCP-Video-Candidate.js — LCP Video Candidate
  • scripts/LCP.js — Largest Contentful Paint (LCP)

Common Workflows

Complete Core Web Vitals Audit

When the user asks for a comprehensive Core Web Vitals analysis or "audit CWV":

  1. LCP.js - Measure Largest Contentful Paint
  2. CLS.js - Measure Cumulative Layout Shift
  3. INP.js - Measure Interaction to Next Paint
  4. LCP-Subparts.js - Break down LCP timing phases
  5. LCP-Trail.js - Track LCP candidate evolution

LCP Deep Dive

When LCP is slow or the user asks "debug LCP" or "why is LCP slow":

  1. LCP.js - Establish baseline LCP value
  2. LCP-Subparts.js - Break down into TTFB, resource load, render delay
  3. LCP-Trail.js - Identify all LCP candidates and changes
  4. LCP-Image-Entropy.js - Check if LCP image has visual complexity issues
  5. LCP-Video-Candidate.js - Detect if LCP is a video (poster or video element)

CLS Investigation

When layout shifts are detected or the user asks "debug CLS" or "layout shift issues":

  1. CLS.js - Measure overall CLS score
  2. Layout-Shift-Loading-and-Interaction.js (pending — available in webperf-interaction skill)
  3. Cross-reference with webperf-loading skill:
    • Find-Above-The-Fold-Lazy-Loaded-Images.js (lazy images causing shifts)
    • Fonts-Preloaded-Loaded-and-used-above-the-fold.js (font swap causing shifts)

INP Debugging

When interactions feel slow or the user asks "debug INP" or "slow interactions":

  1. INP.js - Measure overall INP value; call getINP() after interactions, getINPDetails() for full list
  2. Interactions.js (pending — available in webperf-interaction skill)
  3. Input-Latency-Breakdown.js (pending — available in webperf-interaction skill)
  4. Long-Animation-Frames.js (pending — available in webperf-interaction skill)
  5. Long-Animation-Frames-Script-Attribution.js (pending — available in webperf-interaction skill)

Read the full file on GitHub · 236 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 5d ago First seen · 236 lines · 113 tokens per session scan A 6e492e43d268

Subscribe to this mod's changes

webperf-core-web-vitals is a skill published in the GitHub repository nucliweb/webperf-snippets (1,445 stars, last pushed 1mo ago), licensed MIT. It adds 113 tokens to every session and 3,077 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

load-testing-expert

Expert in performance and load testing using JMeter, k6, Gatling, load patterns, metrics analysis, and performance optimization. Use when the user mentions performance, testing, QA, scalability, performance testing, or JMeter, or when the task involves Load Testing Types, Key Metrics, Tools & Frameworks, or k6 Load…

personamanagmentlayer/pcl · 75 tokens

module_bottleneck

Find slowest PyTorch modules in recent steps.

DeepLink-org/probing · 15 tokens

evalscope

LLM evaluation & inference performance testing via the evalscope CLI. Translates natural language requests into evalscope commands for: (1) Model accuracy evaluation — runs 160+ benchmarks against local checkpoints or API endpoints (OpenAI-compatible, Anthropic, LiteLLM); (2) Performance stress testing — TTFT, TPOT…

modelscope/evalscope · 197 tokens

hotpath_init

Configure hotpath profiling in a Rust project. Adds the hotpath dependency with feature-gated setup, instruments main with hotpath::main, functions with measure/measureall, and wraps channels, mutexes, rwlocks, streams, futures, reqwest clients, axum routers and byte-level I/O with hotpath macros. Use when the user…

pawurb/hotpath-rs · 88 tokens

hotpath_bump

Bump the hotpath version number across the workspace and related files. Updates crate versions in Cargo.toml files (exact patch version) and version references in the backend middleware, hotpathinit skill, and README (major.minor only). Use when the user wants to bump, bump the version, or release a new hotpath…

pawurb/hotpath-rs · 73 tokens

opentelemetry-net-instrumentation

Provides guidance for implementing OpenTelemetry instrumentation in .NET codebases, covering tracing (Activities/Spans), metrics, logs, naming conventions, error handling, performance, SDK setup, resources, context propagation, and API design best practices.

Aaronontheweb/dotnet-skills · 56 tokens