Guide · Agent skill
How to use the Critical Request Chains Auditor agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
This guide explains the critical-request-chains skill, a set of instructions that lets an AI agent review how a web page loads and spot long sequences of dependent requests that delay the first visible paint. It is written for front-end developers and teams who want a second opinion on performance results, and it assumes you have not used agent skills before. By the end you will know how to install the skill, how to ask for an audit in plain language, and what you need to provide so the advice is based on real measurements.
Critical Request Chains Auditorthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the critical-request-chains ZIP from the page where you found this guide.
- 2Unzip into the skills folder. Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder for one project.
- 3Or upload in the Claude apps. In the Claude apps, open Settings → Capabilities → Skills and upload the skill.
- 4Collect measurements. Run Lighthouse, WebPageTest, or DevTools on the slow page and save the report or waterfall.
- 5Ask for an audit. Describe the slow page in plain words and attach the report, plus the HTML and CSS files if you have them.
- 6Verify before changing code. Check that the agent's suspected chain shows up in your measurements, then apply the fix and measure again.
What the skill makes the agent do
A critical request chain forms when each file has to wait for another before it can start downloading. For example, an HTML file loads a CSS file, and that CSS loads a web font, so the font cannot begin until the CSS has arrived and been processed. These chains delay the initial rendering of the page.
The skill tells the agent to look for these chains, confirm the real bottleneck with measurements, and then suggest fixes. The source names fixes such as reducing the depth of dependent requests, inlining critical CSS, and using preload hints for essential assets found deep in the chain.
- Identify long chains of dependent requests that block the critical rendering path
- Confirm the bottleneck with Lighthouse, WebPageTest, DevTools, or field data before recommending changes
- Recommend fixes such as inlining critical CSS or adding preload hints
- Explain how the chains affect Time to First Paint
Install the skill from the ZIP or the Claude apps
Download the ZIP for this skill from our page. To install it for your own user account, unzip it into ~/.claude/skills/. To install it for a single project, unzip it into that project's .claude/skills/ folder.
If you use the Claude apps, you can upload the skill instead under Settings → Capabilities → Skills.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills
Trigger the skill with a natural request
The skill's description says it applies when you are auditing slow page loads, heavy assets, or rendering delays. You do not need a special command. Describe the problem in plain words and include the measurements you have.
Give the agent the page or files involved and the output of your test tool, such as a Lighthouse report or a WebPageTest waterfall. The skill asks the agent to verify the bottleneck before it recommends anything, so measurements make the answer far more useful.
- "My landing page is slow to show anything. Here is the Lighthouse report. Check for critical request chains."
- "Review index.html and styles.css for render-blocking request chains and tell me which files to preload."
- "Look at this WebPageTest waterfall and tell me whether the font loads behind the CSS."
What you need before you start
The skill does not run tests or measure your site. It gives guidance only, so you must supply the measurements. Use Lighthouse, WebPageTest, or browser DevTools to produce the data the skill asks for. Field data from real users can also be used.
The skill is rated advanced. Advice applied without measurement can make a page worse, so confirm each suspected chain before changing code.
- Lighthouse, WebPageTest, or browser DevTools to produce measurements
- Access to the HTML, CSS, and asset files you want reviewed
- The page's real loading data, not guesses
Safety notes: scripts and network
According to the skill's listing, it runs no scripts and uses no network. It works from the instructions in SKILL.md and the reference file references/rule.md, and from the material you paste or provide.
Because the skill itself does not touch your site, any measurement you run is done by your own tools. Review any suggested code change before you deploy it.
- Runs scripts: no
- Uses network: no
- Files: SKILL.md and references/rule.md
Tips for better audits
Skip this skill for simple static sites with few assets, because the gain is likely to be negligible. It is most useful for pages with several layers of stylesheets, scripts, and fonts that load one after another.
Ask the agent to name the exact files and requests involved and to describe how each measurement was taken. The skill asks for this so you can check the reasoning.
- Start with a baseline measurement so you can compare before and after
- Focus on the longest chain first
- Use preload only for essential assets, not everything
What people use it for
- Finding a font that only starts loading after a stylesheet has been fetched
- Reviewing a landing page before launch for render-blocking request chains
- Getting a second opinion on a Lighthouse or WebPageTest result
- Deciding which essential assets deserve a preload hint
Frequently asked questions
How do I install the critical-request-chains skill?
Download the ZIP from the page, then unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. In the Claude apps you can instead upload it under Settings → Capabilities → Skills.
Does this skill run tests on my website?
No. The skill gives guidance only and does not run scripts or use the network. You need to supply measurements from Lighthouse, WebPageTest, DevTools, or field data.
What do I need to use it?
You need Lighthouse, WebPageTest, or browser DevTools to produce the measurements the skill asks for. Having the relevant HTML and CSS files helps the agent point to exact requests.
Is the skill free to use?
The source lists the licence as MIT. Check the repository's licence file for the full terms.
What is the difference between this skill and running Lighthouse yourself?
Lighthouse produces measurements, while this skill gives an agent a method for reading them and suggesting fixes. The skill is meant as a second opinion on results you already have.
Is this skill suitable for beginners?
It is rated advanced. Beginners should confirm each suspected chain with measurements before changing code, since advice applied without measurement can make things worse.
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
This skill is a good fit for front-end developers and teams who want a structured second opinion on Lighthouse or WebPageTest results for a slow page. It is not useful for simple static sites with few assets, and it will not measure anything for you. If you want the agent to run tests itself, pick a different tool.
Download the skill