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.
Borrowing it
Nothing to install: this file belongs to nucliweb/webperf-snippets. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/nucliweb/webperf-snippets/main/CLAUDE.mdgit clone --depth 1 https://github.com/nucliweb/webperf-snippetsWrote 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.
[](https://agentmods.dev/instructions/nucliweb/webperf-snippets/claude-md)<a href="https://agentmods.dev/instructions/nucliweb/webperf-snippets/claude-md"><img src="https://agentmods.dev/badge/instructions/nucliweb/webperf-snippets/claude-md/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/instructions/nucliweb/webperf-snippets/claude-md"><img src="https://agentmods.dev/badge/instructions/nucliweb/webperf-snippets/claude-md.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.02118 | $0.02118 |
| Opus 5.5 | $0.00847 | $0.00847 |
| Sonnet 5.5 | $0.00424 | $0.00424 |
| Haiku 4.5 | $0.00212 | $0.00212 |
Grade A, and why
webperf-snippets CLAUDE.md 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 today.
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.
How it starts
The opening of the file, as written. The whole thing — 111 lines — stays where its author put it; the contents beside it link to each section on GitHub.
CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
Project overview
WebPerf Snippets is a curated collection of web performance measurement JavaScript snippets for the browser console and Chrome DevTools. The repository is a documentation site (Next.js + Nextra) plus the tooling that packages the same snippets as Agent Skills, a CLI and llms.txt files.
The snippet source files in snippets/ are the single source of truth. Documentation pages, skills, the CLI and llms-full.txt are all derived from them.
Technology stack
- Site: Next.js 16 App Router with Nextra 4 (
nextra-theme-docs) and React 19, deployed on Vercel. Search is Pagefind, built afternext build - Media: Cloudinary URLs (
res.cloudinary.com/nucliweb), with no SDK - Analytics: Google Analytics and DebugBear
- CLI (
cli/, npm workspacewebperf-snippets): Playwright runner for the snippets, tested with Vitest
Repository layout
content/ MDX pages, file-system routing, one _meta.js per directory
app/ Root layout, the [[...mdxPath]] page that renders the MDX, sitemap and robots
mdx-components.js MDX components of the theme, with the external link label
CoreWebVitals/ Loading/ Interaction/ Media/ Resources/ DevTools-Overrides/
index.mdx, which-snippet.mdx, CLI.mdx, visualizer.mdx
snippets/ The snippet sources (*.js), same categories as content/
SCHEMA.md Return-value contract every snippet must follow
_shared/ Helpers marked with `// @shared`
components/ Snippet (code block), Callout, Icon, Demo, SnippetVisualizer, diagrams/
components/diagrams/ Own SVG diagrams (Flow, Sequence, custom), styled with --dg-* tokens
lib/ remark/rehype plugins: browser support, icons, emoji stripping
styles/globals.css Global styles, including the --dg-* tokens and .wp-support*
public/demos/ Interactive HTML demos; see public/demos/README.md for the contract
skills/, dist/, .claude/skills/ Generated Agent Skills (do not edit by hand)
public/llms.txt, public/llms-full.txt Generated
public/<page>.md Markdown version of each page, generated before the build and not committed (lib/page-markdown.mjs)
cli/ Playwright CLI, workflows, e2e tests and fixtures
extension/ Chrome DevTools panel that runs the snippets (MV3, loaded unpacked)
.claude-plugin/ Marketplace of Claude Code, with the plugins of plugins/
plugins/webperf/ Claude Code plugin with the MCP server of the CLI (npx -y webperf-snippets@1 mcp)
scripts/ Generators, checks and their tests
workspace/ Local notes, ignored by git
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.
- today Changed · +3 lines · +73 tokens per session 53fd5f50ff57
- 3d ago Changed · +7 tokens per session 5473afa2a08a
- 6d ago Changed · +1 lines · +18 tokens per session 186e519d0275
- 7d ago Changed · +42 tokens per session ba86e72dac2e
- 8d ago Changed · +4 lines · +86 tokens per session 24f19de31a95
- 9d ago Changed · +1 lines · +27 tokens per session 89e27003a3c7
- 10d ago Changed · +18 tokens per session 557da5608d93
- 15d ago Changed · +1 lines · +26 tokens per session ad2e27a54137
- 16d ago Changed · +1 lines · +21 tokens per session 87ace6c41572
- 17d ago First seen · 100 lines · 1,800 tokens per session scan A 0654b6166133
webperf-snippets CLAUDE.md is an instructions file published in the GitHub repository nucliweb/webperf-snippets (1,454 stars, last pushed today), licensed MIT. It adds 2,118 tokens to every session, about $0.0085 per session on Opus 5.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.
Other instructions, from other repositories
vscode buildNext.instructions.md
Working notes and architecture documentation for the new esbuild-based build system in build/next. Use when making changes to the new build pipeline (transpile/bundle commands, NLS plugin, source-map handling, resource copying, or self-hosting watch tasks).
next.js AGENTS.md
AGENTS.md instructions for vercel/next.js, covering next.js development guide, codebase structure, monorepo overview, core package: packages/next and other important packages.
vscode oss-third-party-notices.instructions.md
Instructions for microsoft/vscode, covering vs code oss third-party-notices pipeline, architecture, pipeline flow in ci, cache eligibility and rollout and applying the notice (cutover).
langchain AGENTS.md
AGENTS.md instructions for langchain-ai/langchain, covering global development guidelines for the langchain monorepo, corridor security analysis, project architecture and context, monorepo structure and development tools & commands.
vscode copilot-instructions.md
Copilot instructions for microsoft/vscode, covering vs code copilot instructions, project overview, root folders, core architecture (src/ folder) and built-in extensions (extensions/ folder).
deno copilot-instructions.md
Copilot instructions for denoland/deno, covering deno development guide for github copilot, network access, high level overview, key directories and key files to understand first.