Guide · Agent skill
How to use the HTML Resource Hints Reviewer agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The html-resource-hints skill teaches an AI agent to review web page markup, templates and shared components for resource hints such as preload, prefetch, preconnect and dns-prefetch. This guide explains what the skill does, how to install it, how to ask for a review in plain language, and what to check before you act on its suggestions. You do not need prior experience with agent skills to follow it.
HTML Resource Hints Reviewerthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the html-resource-hints ZIP from this page.
- 2Unzip into a skills folder. Extract it to ~/.claude/skills/ for personal use, or to .claude/skills/ inside a project.
- 3Or upload it in the Claude apps. Go to Settings, then Capabilities, then Skills, and upload the ZIP.
- 4Make a natural request. Ask the agent to review a named template, rendered HTML file or shared component for resource hints.
- 5Review the flagged elements. Check each suggested preload, prefetch, preconnect or dns-prefetch against the exact element the agent points to.
- 6Measure before shipping. Test each change with real performance measurements and keep only the hints that help.
What the skill makes the agent do
Resource hints are browser instructions. They tell the browser to fetch important files, such as fonts, hero images or key scripts, earlier than it would normally discover them, or to open connections to third-party servers ahead of time. The browser normally finds a font referenced in a CSS file only after it parses that CSS, so the font download starts late.
With this skill installed, the agent checks whether critical resources are discovered late, suggests where preload or preconnect tags would help, flags misuse, and points to the exact elements or template locations that need changes.
- Looks for late-discovered critical resources: fonts referenced in CSS, hero images and key scripts.
- Suggests where preload or preconnect hints would help.
- Flags hints that are misused.
- Points to exact elements, attributes or template locations to change.
Install the skill from the ZIP or the Claude apps
Download the ZIP for this skill from this page. Then choose one of two install routes.
For a personal install, unzip the file into ~/.claude/skills/. For a single project, unzip it into the project's .claude/skills/ folder. Either way, the skill folder should contain SKILL.md and a references folder with rule.md.
If you use the Claude apps, you can upload the ZIP instead. Open Settings, go to Capabilities, then Skills, and upload the skill there.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills
Trigger the skill with natural requests
You do not need a special command. The skill's description tells the agent when to use it: reviewing templates, rendered HTML or shared components that relate to resource hints. Ask in plain language and name the file or component you want checked.
Good requests name the markup and the goal. For example, ask the agent to review a base layout template for font preloads, or to check whether a rendered page loads its hero image late. Paste the HTML if the file is not in your project.
- "Review templates/base.html for resource hints that would help the custom fonts load sooner."
- "Check this rendered HTML for critical resources discovered late, such as hero images or key scripts."
- "Look at our shared header component and tell me whether any third-party origins need preconnect."
- "Flag any preload tags in this page that look unnecessary."
Know the four hint types the skill applies
The skill uses four hint types. preload forces immediate download of a resource the current page needs. prefetch fetches a resource likely needed for the next navigation, at low priority. preconnect performs DNS, TCP and TLS setup for an origin you will connect to soon. dns-prefetch resolves DNS for a third-party origin in advance.
The reference file includes a short example of each pattern, shown below as it appears in the source. Use these as a reference point when reading the agent's suggestions.
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/images/hero.webp" as="image">
<link rel="preconnect" href="https://fonts.googleapis.com">Read and test the suggestions before accepting them
Treat the agent's output as a review, not as a set of automatic changes. Overusing preload wastes bandwidth and can slow the page down. Test any suggested hint with real performance measurements before you ship it.
The skill checks the rendered HTML. If your site builds markup at runtime in the browser, the skill may miss tags injected on the client side. Check the final browser-facing markup yourself in those cases.
- Measure page load before and after each change.
- Add hints only for resources that are truly critical.
- Be cautious with single-page apps, where markup may be generated at runtime.
Safety notes: scripts and network access
According to the skill's listing, it runs no scripts and uses no network access. It requires nothing else to be listed. The skill is a text checklist plus a reference file, so the agent reviews the markup you give it.
Its licence is MIT.
- Runs scripts: no
- Uses network: no
- Requires: nothing listed
What people use it for
- Finding a font referenced in CSS that loads late and causes flicker, then suggesting a preload for it.
- Reviewing a shared server-rendered header to see whether third-party origins need preconnect.
- Checking a hero image in a page template for a preload hint.
- Spotting preload tags that are unnecessary and may waste bandwidth.
Frequently asked questions
How do I install the html-resource-hints 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.
What do I need to run it?
The listing states that the skill requires nothing else. It runs no scripts and uses no network access.
Is the html-resource-hints skill free?
The skill is published under the MIT licence. This page does not list any price.
What is the difference between preload and preconnect?
preload fetches a specific resource the current page needs right away. preconnect sets up DNS, TCP and TLS to an origin you will connect to soon, but does not download a file.
Why does the skill say it may miss some tags?
The skill checks the rendered HTML. Single-page apps that inject markup at runtime can add tags the skill does not see, so you should check the final browser-facing markup yourself.
Can I trust every suggestion the agent makes?
No. Overusing preload wastes bandwidth and can slow a page, so test each suggested hint with real performance measurements before accepting it.
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 suits front-end developers tuning page speed, teams reviewing shared templates or server-rendered components, and reviewers checking that custom fonts load without flicker. It is a weaker fit for single-page apps where markup is generated at runtime, and anyone who would apply its advice without measuring the result should pick a different approach.
Download the skill