Guide · Agent skill
How to use the browser-required agent skill for performance audits
Updated · written with AI from the project's own documentation and checked against our catalogue data
The browser-required skill is a set of instructions that teaches an AI agent to check web page performance in a real browser, using tools such as Lighthouse, DevTools, Puppeteer or WebPageTest, instead of guessing from the code. It is written for front-end developers, teams and reviewers who want measured evidence of a slow page load or rendering delay. After this guide you will know what the skill changes, how to install it, how to phrase requests that trigger it, and what it does not do.
Browser Performance Audit Guidethedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Download the browser-required skill ZIP from this page.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use or into .claude/skills/ inside your project.
- 3Or upload in the Claude apps. In the Claude apps, go to Settings, then Capabilities, then Skills, and upload the ZIP.
- 4Describe the slow page. Ask the agent in plain words about the slow load, heavy assets or rendering delay on a specific page.
- 5Ask for measured evidence. Request the bottleneck confirmed in DevTools, Lighthouse or field data, with LCP, CLS or INP values.
- 6Review the proposed changes. Check which files, requests or rendering steps the agent flags and the method it used to confirm each one.
What the skill makes the agent do
Static analysis reads code but cannot reproduce how a browser renders a page, runs scripts and lays out content. This skill tells the agent to use full browser engines to capture runtime metrics such as LCP, CLS and INP.
Before recommending changes, the agent is asked to confirm the actual bottleneck, such as heavy assets, slow scripts or layout shifts, and to verify performance across different device and connection simulations.
- Confirms the real slow spot before suggesting fixes
- Measures LCP, CLS and INP rather than guessing
- Points to Lighthouse, DevTools, Puppeteer or WebPageTest as measurement methods
- Asks the agent to name the exact files, requests or rendering steps that add cost, and the method used to confirm it
How to install the browser-required skill
Option 1, personal install: download the ZIP for this skill from this page and unzip it into ~/.claude/skills/. Option 2, project install: unzip it into the .claude/skills/ folder of your project so that only that project uses it.
Option 3, Claude apps: upload the ZIP in the Claude apps under Settings, then Capabilities, then Skills.
- Personal: ~/.claude/skills/
- Project: .claude/skills/ inside your project folder
- Claude apps: Settings → Capabilities → Skills
How to trigger the skill with natural requests
The skill's description tells the agent when to use it: when auditing slow page loads, heavy assets or rendering delays. You do not need a special command. Describe the performance problem in plain words and mention a measurement tool if you have one in mind.
- "My product page takes too long to load. Find the real bottleneck before changing anything."
- "Check layout shifts on the homepage using DevTools or Lighthouse and tell me what causes them."
- "Measure INP on the checkout flow and show me the evidence for each suggested fix."
- "Suggest where we could add a WebPageTest or Lighthouse check to our CI/CD pipeline."
What the skill needs and what it does not do
The skill lists no requirements. It does not run scripts and does not use the network. The files are guidance only: they shape how the agent behaves, and they do not run Lighthouse or any other tool themselves. The measurement happens only if your agent or your environment actually runs those tools.
The reference page includes example commands, such as installing Lighthouse globally with npm and running it against a URL in headless Chrome. Treat these as examples to review before running them on your machine.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
- Measurement only happens when a tool such as Lighthouse is actually run
npm install -g lighthouse
lighthouse https://example.com --view --chrome-flags="--headless"Tips for getting useful results
Give the agent a specific page or route and a specific symptom. Ask for the measurement method and the numbers before and after any change, so you can check the result yourself.
Use the skill for pages that run JavaScript and render in a browser. For a simple static site with no browser-side behaviour, the skill's emphasis on browser testing may be more than you need.
- Name the URL or route under test
- Ask which tool produced each metric
- Ask for measurements before and after a fix
- Review any command the agent proposes before running it
What people use it for
- Finding why a product listing page has slow LCP because of heavy images or scripts
- Checking layout shifts on a landing page before a release
- Deciding whether a slow checkout flow is caused by script execution or network requests
- Drafting where Lighthouse or WebPageTest checks could sit in a CI/CD pipeline
Frequently asked questions
How do I install the browser-required skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into .claude/skills/ inside a project. You can also upload the ZIP in the Claude apps under Settings, then Capabilities, then Skills.
Does the browser-required skill require anything to be installed?
The skill lists no requirements. It is made of guidance files (SKILL.md and references/rule.md) and does not run scripts or use the network itself.
Is the browser-required skill free?
The skill is published under the MIT licence. This page does not list any price, so check the source repository for licence terms.
Does the skill run Lighthouse for me?
No. The skill only shapes how the agent behaves. Lighthouse, DevTools or WebPageTest measurements happen only if the agent or your environment actually runs them.
Can I use this skill instead of a one-click speed report?
Not really. The skill is for developers and agents who want measured evidence and investigation. If you want a single button that produces a speed score, a dedicated reporting tool is a better fit.
Which metrics does the skill focus on?
The skill names LCP, CLS and INP as the runtime metrics to measure in a real browser, and asks the agent to confirm the actual bottleneck before recommending changes.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer or reviewer who wants an AI agent to investigate slow pages with real browser measurements before changing code. Pick something else if you only need a quick speed score, a static-site check with no browser testing, or a tool that runs measurements on its own, since this skill only guides the agent.
Download the skill