CtrlK
BlogDocsLog inGet started
Tessl Logo

font-loading

Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize web font loading. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.

59

Quality

69%

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/font-loading/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

72%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.

The body is a lean, well-structured overview with concrete fix directives and an exemplary single one-level reference that carries the full code examples and verification guidance. Its main weakness is workflow clarity: the body sequences check-then-fix but never closes the loop with an explicit post-fix measurement step, and the Quick Reference section adds minor redundancy.

Suggestions

Close the workflow loop in the body: add a short 'Verify' step after Fix (e.g. 'Re-run Lighthouse/PageSpeed and confirm the font waterfall and CLS/LCP metric improved') — post-fix validation currently lives only in references/rule.md and is not connected to the Check/Fix sequence.

Merge the Quick Reference bullets into the Fix section (or vice versa) to remove the duplicated font-display/preload/WOFF2 guidance and tighten token efficiency.

DimensionReasoningScore

Conciseness

The body is short, assumes Claude's competence (no primer on what fonts or CSS are), and every section carries concrete directives. It falls short of 5 because of minor trimmable redundancy: the Quick Reference bullets duplicate the Fix section's guidance, and the Code Review section restates the rule title as a noun phrase ('rendering steps that affect Optimize web font loading'), which is template filler.

4 / 5

Actionability

Concrete, near-executable guidance is present: 'Add `font-display: swap` to `@font-face` declarations and use `<link rel='preload'>` for the most important fonts', with full executable code one reference away (verified in references/rule.md). Not 5 because the body itself contains no executable snippet and omits key preload details (as="font", crossorigin) that make the directive actually work — those are minor gaps rather than the missing specific steps of a 3.

4 / 5

Workflow Clarity

A rough sequence exists (Check → Fix → Explain/Code Review) with the Check step as a pre-flight checkpoint, but there is no post-fix validation step in the body — confirming the metric improved appears only in references/rule.md's Verification section and is not tied into the workflow. This matches 'steps listed but validation gaps; sequence present but checkpoints missing or implicit' rather than 4, which requires most checkpoints present; Explain and Code Review also read as parallel modes rather than sequenced steps.

3 / 5

Progressive Disclosure

The body is a concise, well-sectioned overview that defers all implementation detail to a single, clearly signaled, one-level-deep reference ('For full implementation details, code examples, and framework-specific guidance, see `references/rule.md`' — verified to exist and contain exactly that). Content split and navigation match 'clear overview with well-signaled one-level-deep references'.

5 / 5

Total

16

/

20

Passed

Description

66%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.

The description has an explicit and naturally phrased trigger clause plus a sensible verify-before-recommending guardrail, but it under-communicates the skill's actual capabilities and its generic performance triggers create overlap risk with sibling performance rules. Rewriting to lead with concrete font-loading capabilities and font-specific triggers would lift both specificity and distinctiveness.

Suggestions

State the concrete capabilities the skill delivers, e.g. 'Audits web font loading (font-display, preloading, WOFF2 formats, subsetting) and fixes FOIT/layout-shift issues' — the current description never mentions what the skill actually changes.

Add font-specific trigger terms such as 'custom fonts', 'layout shift', 'FOUC', or '.woff2' so the description fires on font requests rather than any generic 'slow page load' request that sibling performance rules also match.

Rephrase so the rule title is not grammatically embedded ('related to Optimize web font loading' reads awkwardly); lead with the what, then the when.

DimensionReasoningScore

Specificity

The description names the domain ("web font loading") and one or two concrete actions ("auditing slow page loads", "Verify the actual bottleneck in DevTools, Lighthouse, or field data"), but never states what the skill actually delivers — no mention of font-display, preloading, WOFF2, or fixing font loading. It matches 'names domain and 1-2 concrete actions, but not comprehensive' rather than 4, whose example lists several delivered capabilities; it is above 2 because the actions given are concrete rather than generic.

3 / 5

Completeness

The 'when' is explicit ("Use when auditing slow page loads... related to Optimize web font loading") and the 'what' is present but weak — the capability is only implied via the embedded rule title plus a process instruction ("Verify the actual bottleneck... before recommending changes") rather than a clear statement of what the skill does. This matches 'has both what and when; when could be more explicit or specific' (inverted: here what could be stronger), not 5, which requires both clearly and explicitly stated.

4 / 5

Trigger Term Quality

Phrases like "slow page loads, heavy assets, or rendering delays", "DevTools, Lighthouse", and "web font loading" are natural terms a user would say when needing this skill. It falls short of 5 because common synonyms and specifics are missing — e.g. "page speed", "layout shift", "FOUC/FOIT", "custom fonts", ".woff2" — matching 'good keyword coverage; a few natural terms missing' rather than comprehensive coverage.

4 / 5

Distinctiveness Conflict Risk

The font-specific qualifier distinguishes it from non-performance skills, but the leading triggers ("slow page loads, heavy assets, rendering delays") are generic performance phrasing that sibling performance rules (image optimization, bundle size, etc.) would also match, so overlap with similar skills remains. It fits 'somewhat specific but could still overlap with similar skills' — above 2 because the font-loading qualifier does narrow the niche.

3 / 5

Total

14

/

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.