web-perf
elithrar/dotfiles · Agent Skill
Diagnose page-load and interaction performance using browser traces, network evidence, and source code for Core Web Vitals and layout-shift investigations.
Jump to install ↓Overview
| Publisher |  elithrarCommunity |
|---|---|
| Repository | elithrar/dotfiles ↗ |
| Skill folder | web-perf |
| Stars | 221 |
| Forks | 16 |
| Bundled files | 3 |
| License | MIT |
| Last updated | October 18, 2026 |
| Links | Skill source ↗ · Repository ↗ |
Mozgi check
What we found in the skill files. Details come with a subscription.
Installation
A skill is a folder with a SKILL.md file. Pick your agent and run the commands in a terminal (macOS, Linux or Git Bash on Windows) from your project root.
Copy the prompt into Claude, Codex or another assistant: it will review the skill and install it for you.
Install the “web-perf” skill from mozgi.io (https://mozgi.io/skills/elithrar-web-perf/) for me. 1. Download the archive: https://mozgi.io/skills/elithrar-web-perf/download If it fails, take the skill folder from the source: https://github.com/elithrar/dotfiles/tree/main/.agents/skills/web-perf 2. Read SKILL.md and the other files. Check the skill is safe: no hidden commands, no sending data elsewhere, no scripts doing something other than described. If anything looks suspicious, stop and tell me. 3. Put the “web-perf” folder into your agent's skills folder: .claude/skills/ for Claude Code, .agents/skills/ for Codex, .cursor/skills/ for Cursor, .gemini/skills/ for Gemini CLI. Inside the project if we are in one, otherwise in the home folder (~/.claude/skills/ etc.). 4. Make sure <skills folder>/web-perf/SKILL.md exists. 5. Briefly tell me what this skill does and offer to try it on my task. If you cannot do a step yourself, tell me what to click or type.
git clone --depth 1 --branch main https://github.com/elithrar/dotfiles.git /tmp/dotfiles mkdir -p .claude/skills cp -r /tmp/dotfiles/.agents/skills/web-perf .claude/skills/web-perf
Restart Claude Code — the skill appears in the list; call it manually with /web-perf. For all projects use ~/.claude/skills.
git clone --depth 1 --branch main https://github.com/elithrar/dotfiles.git /tmp/dotfiles mkdir -p .agents/skills cp -r /tmp/dotfiles/.agents/skills/web-perf .agents/skills/web-perf
Codex looks for skills in .agents/skills from the current folder up to the repo root; call one with /skills or $web-perf. For all projects use ~/.agents/skills.
git clone --depth 1 --branch main https://github.com/elithrar/dotfiles.git /tmp/dotfiles mkdir -p .cursor/skills cp -r /tmp/dotfiles/.agents/skills/web-perf .cursor/skills/web-perf
Cursor picks the skill up on start; call it with “/” in Agent chat. Cursor also reads .claude/skills and .agents/skills. For all projects use ~/.cursor/skills.
git clone --depth 1 --branch main https://github.com/elithrar/dotfiles.git /tmp/dotfiles mkdir -p .gemini/skills cp -r /tmp/dotfiles/.agents/skills/web-perf .gemini/skills/web-perf
Gemini CLI offers to activate the skill when a task matches — you approve it. For all projects use ~/.gemini/skills.
Read SKILL.md and any companion files before deciding whether to install. Click a file to preview it.
SKILL.md contents
Original author text · read-onlyWeb performance investigation
Identify the target page, reported symptom, and relevant device conditions. For audit requests, report findings. For optimization or fix requests, implement the supported changes and validate their effect within the requested scope.
Choose the evidence path
Inspect the available browser and profiling tools before calling them. Prefer Chrome DevTools traces when available; read references/devtools.md ↗ for trace and network investigation. Use the installed tool schemas rather than assuming example parameters match the current version.
If that MCP server is unavailable, use existing trace or Lighthouse artifacts, another available profiler, or relevant source code. Complete the analysis those sources support and state what could not be measured. Missing profiling tools do not justify stopping source inspection or forcing an MCP installation.
Diagnose
Record the page/build, viewport, device or emulation, network/CPU throttling, cache state, and interactions relevant to the result. Reloading alone does not establish a cold cache. Keep mobile and desktop observations distinct.
Separate field Core Web Vitals from laboratory measurements. A load-only trace does not establish INP; TBT is a diagnostic lab metric, not a substitute INP measurement. Use the current metric definitions when assigning ratings, and label missing measurements as unavailable.
Follow the bottleneck from trace insight to request, element, or source path. Inspect the relevant LCP phases, layout-shift participants, long tasks, late resource discovery, or cache headers. Confirm ownership and use before recommending removal, especially for third-party scripts or resources used only in later interactions. Zero estimated savings is not evidence of a material problem, but one trace cannot prove a resource is never useful.
Validate and report
Prioritize findings by observed user impact and confidence. Distinguish measured values, tool estimates, and unmeasured hypotheses; avoid promising additive savings from overlapping insights.
For a fix, compare the affected behavior under equivalent conditions. Repeat measurements when variance or the size of the claimed improvement warrants it. Broaden testing only for an unresolved regression risk or a project gate, then finish.
Report the measured symptom, its supported cause, the concrete fix or recommendation, and the relevant verification limit. Add a metric table when several measurements help comparison. Do not expand a performance request into a mandatory accessibility or whole-codebase audit.
Frequently asked questions
What does the web-perf skill do?
Diagnose page-load and interaction performance using browser traces, network evidence, and source code for Core Web Vitals and layout-shift investigations.
How do I install web-perf?
Open the “Installation” block on this page and pick your agent — Claude Code, Codex, Cursor or Gemini CLI — for ready-made commands that copy the skill folder to the right place. Or copy the prompt from the “Via assistant” tab and let the assistant review and install the skill.
Which AI models work with web-perf?
Skills are plain Markdown instructions (the Agent Skills format), so web-perf works with any agent that reads SKILL.md: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and more. The model loads the instructions only when a task matches the skill's description.
Is web-perf free?
The skill is published openly by elithrar under the MIT license. The skill itself costs nothing — you only pay your AI provider for the tokens you use.
Is it safe to install skills?
A skill is a set of instructions your agent will follow, so read SKILL.md and its companion files before installing. Scripts in the skill folder only run if your agent runs them — keep an eye on what it does and do not grant unnecessary permissions.
How is a skill different from an MCP server or a plugin?
An MCP server or plugin gives the model new tools — code that runs and returns a result. A skill gives it knowledge and process: how to approach a task, which steps to follow and what good output looks like. It needs no server or API key.
Related skills
All skills →
to-prd
Turns a conversation into a PRD and publishes it to the issue tracker.
mattpocock304k
tdd
Red-green-refactor workflow for building features and fixes one slice at a time.
mattpocock304k
diagnosing-bugs
Systematic bug diagnosis through reproduce, minimize, hypothesize, instrument, and fix.
mattpocock304k
domain-modeling
Builds and sharpens project domain models and terminology.
mattpocock304k
ask-matt
Router that picks the right Matt Pocock engineering flow for the current task.
mattpocock304k
next-cache-components
Enable Cache Components in a Next.js app and resolve blocking routes surfaced during adoption.
vercel143k