What does html-resource-hints do?

It guides the agent through checking rendered HTML for critical resources like fonts and hero images discovered too late by the browser, and suggests resource hint fixes such as preload directives and preconnect links.

When should it be used?

Use it when reviewing templates, rendered HTML, or shared components related to adding resource hints (preload, prefetch, dns-prefetch).

Does it work on source framework code?

It validates the final browser-facing markup, not just the source framework abstraction.

Add resource hints (preload, prefetch, dns-prefetch)

SkillWeb & browsing

html-resource-hints is a skill that guides an AI agent through adding preload, prefetch, and dns-prefetch hints to web pages. It checks rendered HTML for critical resources like fonts and hero images that the browser discovers too late, explains each hint type, and suggests fixes such as preload directives and preconnect links.

Use Add resource hints (preload, prefetch, dns-prefetch) in Claude, ChatGPT or Ahel Desktop

Free. Sign in, add Add resource hints (preload, prefetch, dns-prefetch) and connect your AI. About a minute.

Claude ChatGPT Ahel Desktop

Also: Claude Code · Cursor · Codex

Then ask your AI: use the Add resource hints (preload, prefetch, dns-prefetch) skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.

No other account needed.

Have the skill available to your agent alongside the templates, rendered HTML, or shared components you want reviewed.

Add resource hints (preload, prefetch, dns-prefetch)Start free

What your AI can do with it

Check rendered HTML for critical resources discovered too late by the browser
Explain each resource hint type: preload, prefetch, and dns-prefetch
Flag markup violations during code review of templates and shared components
Suggest fixes such as preload directives and preconnect links
Validate the final browser-facing markup, not just the source framework abstraction

Getting started

Have the skill available to your agent alongside the templates, rendered HTML, or shared components you want reviewed.
Ask the agent to review the markup for missing or incorrect resource hints.
Apply the suggested fixes, such as preload directives or preconnect links, and have the agent re-check the final browser-facing HTML.

What this skill tells your AI

The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/html-resource-hints/SKILL.md and read by ahel’s review.

The browser's HTML parser discovers resources sequentially — a font referenced in a CSS file won't be fetched until the CSS is parsed. Resource hints break this dependency chain, allowing the browser to start fetching critical resources in parallel with parsing. A single preload directive for a critical font can eliminate a 100–300ms Flash of Invisible Text.

Quick Reference

preload forces immediate download of resources needed by the current page
prefetch fetches resources likely needed for the next navigation (low priority)
dns-prefetch resolves DNS for third-party origins in advance
preconnect does DNS + TCP + TLS for origins you'll connect to soon

Check

Look at this HTML file for late-discovered critical resources — fonts referenced in CSS, hero images, and key scripts. Identify where preload or preconnect hints would help.

Fix

Add appropriate preload hints for critical fonts, images, and scripts. Add preconnect for third-party domains used early in the page.

Explain

Explain each resource hint type (preload, prefetch, preconnect, dns-prefetch), when to use each, and the consequences of misusing them.

Code Review

Review templates, server-rendered HTML, and shared components that output markup related to Add resource hints (preload, prefetch, dns-prefetch). Flag exact elements, attributes, and routes where the rendered HTML violates the rule.

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/html/html-resource-hints

Signals

GitHub stars: 74k
Forks: 7k
Last commit: Oct 2026

Questions

What does html-resource-hints do?: It guides the agent through checking rendered HTML for critical resources like fonts and hero images discovered too late by the browser, and suggests resource hint fixes such as preload directives and preconnect links.
When should it be used?: Use it when reviewing templates, rendered HTML, or shared components related to adding resource hints (preload, prefetch, dns-prefetch).
Does it work on source framework code?: It validates the final browser-facing markup, not just the source framework abstraction.

Advanced

Item type: skill
Key: html-resource-hints
Source: github.com/thedaviddias/front-end-checklist

github.com/thedaviddias/front-end-checklist

More in Web & browsing

browser-use
Skill · browser-use
More in Web & browsing webapp-testing
Skill · anthropics
More in Web & browsing playwright-cli
Skill · microsoft
More in Web & browsing benchmark
Skill · affaan-m
More in Web & browsing open-source
Skill · browser-use
More in Web & browsing impeccable
Skill · pbakaus
More in Web & browsing