CtrlK
BlogDocsLog inGet started
Tessl Logo

html-resource-hints

Use when reviewing templates, rendered HTML, or shared components related to Add resource hints (preload, prefetch, dns-prefetch). Validate the final browser-facing markup, not just the source framework abstraction.

62

Quality

74%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/html-resource-hints/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

65%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-structured, brief overview with excellent progressive disclosure to a single verified reference file. The body itself is directive rather than executable — it contains no markup examples or verification steps — and duplicates one explanatory paragraph from the reference.

Suggestions

Replace the conceptual intro paragraph (browser sequential discovery / FOIT) with one inline preload example (e.g., `<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>`) so the body is actionable without opening the reference; the concept is already in references/rule.md's "Why It Matters".

Add a brief verification checkpoint to the Check/Fix flow — e.g., "confirm preloaded fonts include crossorigin and as=font, otherwise the browser double-fetches" — so the workflow has explicit checkpoints instead of deferring all verification to the reference.

Remove the templated phrasing in the Check section ("Look at this HTML file...") and name the concrete artifacts to inspect (rendered page source, template files, component output).

DimensionReasoningScore

Conciseness

The body is short and mostly lean, but the opening paragraph ("The browser's HTML parser discovers resources sequentially — a font referenced in a CSS file won't be fetched until the CSS is parsed... 100–300ms Flash of Invisible Text") explains a concept Claude already knows and is duplicated verbatim in references/rule.md's "Why It Matters". That is a trimmable instance of over-explanation, but not the padded multi-section verbosity of a 3.

4 / 5

Actionability

Guidance stays high-level: "Add appropriate preload hints for critical fonts, images, and scripts. Add preconnect for third-party domains used early in the page" names the actions but omits key executable details (no example markup like `<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>`, no mention of the required `as`/`crossorigin` attributes) — those live only in the reference. This fits "some concrete guidance but incomplete" rather than the mostly-executable profile of a 4.

3 / 5

Workflow Clarity

The Check → Fix → Explain → Code Review sections give a recognizable sequence, but there are no validation/verification checkpoints in the body — how to confirm a hint is correct (e.g., checking for double-fetched fonts or missing `as` attributes) is deferred entirely to the reference. Sequence present with checkpoints missing matches anchor 3, not 4.

3 / 5

Progressive Disclosure

Clean structure: a concise overview body with well-signaled, one-level-deep pointer — "For full implementation details, code examples, and framework-specific guidance, see `references/rule.md`" — and references/rule.md exists and delivers exactly what is promised (code examples, framework guidance, verification). No nesting or buried references, matching the clear-overview anchor.

5 / 5

Total

15

/

20

Passed

Description

83%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description: explicit use-when trigger clause, concrete validation-focused action statement, and domain-specific keywords. Its only weaknesses are slightly thin action coverage and a few missing synonyms (notably "preconnect").

DimensionReasoningScore

Specificity

The description lists several concrete actions — "reviewing templates, rendered HTML, or shared components" and "Validate the final browser-facing markup" — anchored to a specific domain (resource hints). Coverage has minor gaps (e.g., fixing/adding hints is only implied via the rule name), so it sits between the 1-2-action anchor (3) and comprehensive coverage (5).

4 / 5

Completeness

Both parts are explicit: the "what" is "Validate the final browser-facing markup, not just the source framework abstraction" and the "when" opens with a concrete trigger phrase — "Use when reviewing templates, rendered HTML, or shared components related to...". This matches the anchor that clearly answers both what and when with concrete trigger phrases; it does not fall to 4 since the when-clause is explicit rather than merely adequate.

5 / 5

Trigger Term Quality

Good natural keyword coverage: "templates", "rendered HTML", "shared components", "preload, prefetch, dns-prefetch", "markup" — terms a user reviewing HTML would plausibly say. A few natural variants are missing ("preconnect", "font loading", "HTML performance"), keeping it below the comprehensive-synonyms anchor (5) but clearly above sparse keyword coverage (3).

4 / 5

Distinctiveness Conflict Risk

The resource-hint niche (preload/prefetch/dns-prefetch in rendered HTML) is distinct with its own trigger terms, but it could overlap with adjacent HTML-performance or general HTML-review skills, so minor overlap risk remains rather than the minimal-conflict profile of a 5.

4 / 5

Total

17

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
thedaviddias/Front-End-Checklist
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.