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.
npx skills add d-padmanabhan/agent-engineering-handbook --skill web-perfgit clone --depth 1 https://github.com/d-padmanabhan/agent-engineering-handbookWrote 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/skills/d-padmanabhan/agent-engineering-handbook/web-perf)<a href="https://agentmods.dev/skills/d-padmanabhan/agent-engineering-handbook/web-perf"><img src="https://agentmods.dev/badge/skills/d-padmanabhan/agent-engineering-handbook/web-perf/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/skills/d-padmanabhan/agent-engineering-handbook/web-perf"><img src="https://agentmods.dev/badge/skills/d-padmanabhan/agent-engineering-handbook/web-perf.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.00096 | $0.02052 |
| Opus 5 | $0.00048 | $0.01026 |
| Sonnet 5 | $0.00019 | $0.00410 |
| Haiku 4.5 | $0.00010 | $0.00205 |
Grade A, and why
web-perf 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 9d 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.
This is a copy
100% identical to web-perf — 25 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 211 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Web Performance Audit
Your knowledge of web performance metrics, thresholds, and tooling APIs may be outdated. Prefer retrieval over pre-training when citing specific numbers or recommendations.
Retrieval Sources
| Source | How to retrieve | Use for |
|---|---|---|
| web.dev | https://web.dev/articles/vitals |
Core Web Vitals thresholds, definitions |
| Chrome DevTools docs | https://developer.chrome.com/docs/devtools/performance |
Tooling APIs, trace analysis |
| Lighthouse scoring | https://developer.chrome.com/docs/lighthouse/performance/performance-scoring |
Score weights, metric thresholds |
FIRST: Verify MCP Tools Available
Run this before starting. Try calling navigate_page or performance_start_trace. If unavailable, stop: the chrome-devtools MCP server isn't configured.
Ask the user to add this to their MCP config:
"chrome-devtools": {
"type": "local",
"command": ["npx", "-y", "chrome-devtools-mcp@latest"]
}
Key Guidelines
- Be assertive: Verify claims by checking network requests, DOM, or codebase, then state findings definitively.
- Verify before recommending: Confirm something is unused before suggesting removal.
- Quantify impact: Use estimated savings from insights. Don't prioritize changes with 0ms impact.
- Skip non-issues: If render-blocking resources have 0ms estimated impact, note but don't recommend action.
- Be specific: Say "compress hero.png (450KB) to WebP" not "optimize images".
- Prioritize ruthlessly: A site with 200ms LCP and 0 CLS is already excellent; say so.
Quick Reference
| Task | Tool Call |
|---|---|
| Load page | navigate_page(url: "...") |
| Start trace | performance_start_trace(autoStop: true, reload: true) |
| Analyze insight | performance_analyze_insight(insightSetId: "...", insightName: "...") |
| List requests | list_network_requests(resourceTypes: ["Script", "Stylesheet", ...]) |
| Request details | get_network_request(reqid: <id>) |
| A11y snapshot | take_snapshot(verbose: true) |
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.
- 9d ago First seen · 211 lines · 96 tokens per session scan A 11a1c3fc8380
web-perf is a skill published in the GitHub repository d-padmanabhan/agent-engineering-handbook (17 stars, last pushed today), licensed MIT. It adds 96 tokens to every session and 2,052 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to web-perf, differing in 25 lines, and is treated as a copy.
Other skills, from other repositories
inspecting-hermes-desktop-dom
Read the live Hermes desktop DOM/CSS over CDP.
fixing-motion-performance
Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.
optimize-web-animations
Profile, audit, and optimize frontend page performance with emphasis on animation work, memory-leak risks, long-session slowdowns, CSS animations, canvas/WebGL requestAnimationFrame loops, marquees, skeletons, GSAP/Three/Matter effects, timers, listeners, and observers. Use when the user asks to make animations…
weapp-tailwindcss-troubleshoot
A troubleshooting guide for weapp-tailwindcss and its CLI when generated styles, class conversion, builds, or hot reload do not work as expected.
performance-audit
Performance audit — bundle size, image opt, lazy load, code split, caching, CWV. Deep-dive for /launch-check performance.
Dark Mode Bug Finder
Detect dark mode rendering issues including contrast failures, missing theme tokens, image inversions, and transition glitches across components.