Skip to content
Get packs

HTML Resource Hints Reviewer

Reviews HTML for missing or misused preload, prefetch, preconnect and dns-prefetch hints

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

This skill teaches an AI agent to review web page markup and templates for resource hints, which are browser instructions that tell it to fetch important files (fonts, hero images, key scripts) earlier, or to connect to third-party servers ahead of time. When installed, the agent checks whether critical resources are discovered late, suggests where preload or preconnect tags would help, flags misuse, and points to exact elements or template locations that need changes. The skill's own text is a short checklist; fuller framework-specific guidance lives in a reference file.

Great for

  • Front-end developers tuning page load speed
  • Teams reviewing shared templates or server-rendered HTML components
  • Designers or reviewers checking that custom fonts load without flicker

Skip it if

  • Single-page apps where markup is generated at runtime, since the skill checks the rendered HTML and may miss client-side injected tags (the skill itself warns to validate the final browser-facing markup)
  • Sites where the advice could cause harm if applied blindly: overusing preload wastes bandwidth and can slow the page, so suggestions should be tested with real performance measurements rather than accepted automatically

Try asking

  • “Review this HTML template and tell me which fonts or hero images should be preloaded”
  • “Check our shared header component for preconnect hints to third-party domains”
  • “Explain the difference between preload, prefetch and dns-prefetch for my team”
  • “Flag any resource hints in this rendered page that are misused”
Step-by-step guide: how to use HTML Resource Hints ReviewerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    html-resource-hints.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip html-resource-hints.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip html-resource-hints.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Paste the rendered HTML output (not only the source template) so the agent sees what browsers actually receive.
  • Name the critical resources you know about, such as your main font file or hero image, to get more specific suggestions.
  • Test any suggested hint with browser performance tools before shipping, because unnecessary preloads can hurt performance.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.