webperf-snippets CLAUDE.md

A project guide for WebPerf Snippets, a documentation website containing JavaScript examples for measuring website speed and user experience.

In plain words
What is it for?
Use it when working on the site's Next.js and Nextra pages, performance topics, media, deployment, analytics, or navigation configuration.
Why use it?
It gives an AI coding agent the project background, technology choices, and folder layout needed to make appropriate changes.

Instructions file

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 instructions/nucliweb/webperf-snippets/claude-md
Clone the repo
git clone --depth 1 https://github.com/nucliweb/webperf-snippets
Per session 853 This file is loaded in full into every session.
When invoked 853 The same file — it is already loaded in full.
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.00853 $0.00853
Opus 5 $0.00426 $0.00426
Sonnet 5 $0.00171 $0.00171
Haiku 4.5 $0.00085 $0.00085

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

Security

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 2d ago.

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.md · 111 lines

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 designed for use in browser consoles or Chrome DevTools. The project is a documentation website built with Next.js and Nextra, serving as a comprehensive resource for web performance analysis tools.

Architecture

Technology Stack

  • Framework: Next.js 13+ with Nextra documentation theme
  • Theme: nextra-theme-docs for documentation layout
  • Media: Cloudinary integration via next-cloudinary for optimized images/videos
  • Deployment: Vercel
  • Analytics: Google Analytics and DebugBear monitoring

Project Structure

pages/
├── _app.js                  # Next.js app wrapper with analytics scripts
├── _meta.json              # Top-level navigation configuration
├── index.mdx               # Homepage with introduction and video
├── CoreWebVitals/          # LCP, CLS, and related metrics
│   ├── _meta.json
│   └── *.mdx
├── Loading/                # Resource loading, TTFB, scripts, fonts analysis
│   ├── _meta.json
│   └── *.mdx
└── Interaction/            # User interaction and animation frame metrics
    ├── _meta.json
    └── *.mdx

theme.config.jsx            # Nextra theme configuration (branding, SEO, footer)
next.config.js              # Next.js + Nextra configuration with redirects

Content Organization

The documentation uses Nextra's file-system based routing:

  • Each category has its own directory under pages/
  • Individual snippets are documented in .mdx files with executable JavaScript code
  • Navigation structure is controlled by _meta.json files in each directory
  • All snippets are JavaScript code meant for Chrome DevTools console execution

Key Configuration Files

  • theme.config.jsx: Site branding (logo SVG), SEO meta tags, Open Graph settings, footer, sidebar configuration
  • pages/_app.js: Next.js app wrapper that includes DebugBear and Google Analytics scripts
  • next.config.js: Nextra integration and URL redirects for renamed pages

Read the full file on GitHub · 111 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. 2d ago First seen · 111 lines · 853 tokens per session scan A c1a209799aee

Subscribe to this mod's changes

webperf-snippets CLAUDE.md is an instructions file published in the GitHub repository nucliweb/webperf-snippets (1,445 stars, last pushed 1mo ago), licensed MIT. It adds 853 tokens to every session, about $0.0043 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 instructions, from other repositories

hotpath-rs AGENTS.md

AGENTS.md instructions for pawurb/hotpath-rs, covering agents.md, project overview, reference docs, development commands and profiling modes are combined via features, e.g.

pawurb/hotpath-rs · 2,336 tokens

vscode-angular-snippets AGENTS.md

Instructions for johnpapa/vscode-angular-snippets, covering angular snippets for vs code — agent guide, repository structure, tech stack, build & run and test in browser (vscode.dev mode).

johnpapa/vscode-angular-snippets · 1,584 tokens

vscode-angular-snippets copilot-instructions.md

Instructions for johnpapa/vscode-angular-snippets, covering copilot instructions — vscode-angular-snippets, project type, snippet conventions, prefix naming and snippet body.

johnpapa/vscode-angular-snippets · 641 tokens

web-worker-patterns copilot-instructions.md

Instructions for damiansire/web-worker-patterns, covering persona, examples, resources, best practices & style guide and coding style guide.

damiansire/web-worker-patterns · 1,059 tokens

web-worker-patterns AGENTS.md

Instructions for damiansire/web-worker-patterns, covering agents.md, estado actual (uno y uno), la regla de oro (no negociable) and gates antes de cerrar cualquier cambio.

damiansire/web-worker-patterns · 643 tokens

flameox AGENTS.md

Instructions for morluto/flameox, covering repository guidelines, product direction, project structure & module organization, build, test, and development commands and coding style & naming conventions.

morluto/flameox · 1,170 tokens