CtrlK
BlogDocsLog inGet started
Tessl Logo

webfont-format

Use when reviewing stylesheets, component styles, and responsive behavior related to Optimize web font formats. Check the rendered layout across breakpoints and interaction states before proposing a fix.

52

Quality

58%

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/webfont-format/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%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 well-structured, token-lean overview with excellent progressive disclosure to a substantial reference file, but it sacrifices actionability — no code, commands, or conversion steps appear in SKILL.md itself — and the four templated Check/Fix/Explain/Code Review sections restate one rule four ways without adding execution guidance or validation checkpoints.

Suggestions

Add one minimal executable example to the Quick Reference (e.g. an @font-face src chain with woff2/woff formats plus font-display: swap, and a font-conversion command) so the body is actionable without opening the reference.

Collapse the Check/Fix/Explain/Code Review paraphrase sections into a single Check-then-Fix workflow and drop the Explain section, which adds no actionable content.

Include a validation checkpoint in the Fix flow (e.g. verify WOFF2 is served in the network panel and fallback fonts render before considering the fix complete).

DimensionReasoningScore

Conciseness

The body is short and free of concept-teaching padding, but the Check/Fix/Explain/Code Review sections are four near-paraphrases of the same single rule ('Verify that web fonts use modern formats (WOFF2, WOFF) with proper fallbacks...' vs 'Convert fonts to WOFF2/WOFF formats, implement proper font loading strategies...'), and the 'Explain' section is pure filler for an agent skill. Mostly efficient but could be tightened by collapsing to one or two sections — not 4 because the redundancy is a structural pattern rather than a minor instance, and not 2 because there is no explanation of things Claude already knows and total size is small.

3 / 5

Actionability

The Quick Reference names concrete specifics ('Use WOFF2 as primary format (~30% smaller than WOFF)', 'Apply font-display: swap', 'Preload critical fonts and subset'), which is real guidance beyond high-level hints. But the Fix section offers only direction with no execution detail — no @font-face example, no conversion command (e.g. a woff2 compression tool), no preload snippet — so guidance is incomplete and non-executable. Not 4 because nothing in the body is copy-paste ready; not 2 because exact formats and CSS properties are named rather than vague library references.

3 / 5

Workflow Clarity

A rough sequence exists (Quick Reference → Check → Fix), so steps are listed rather than incoherent, but there are no validation checkpoints — nothing tells the agent how to verify a font actually serves WOFF2 or that fallbacks render correctly before moving on. This matches the 'steps listed but validation gaps' anchor; not 4 because checkpoints are entirely absent, and not 2 because the Check-then-Fix ordering is a coherent, if implicit, sequence.

3 / 5

Progressive Disclosure

The body is a lean overview (~30 lines) with a clearly signaled, one-level-deep reference — 'For full implementation details, code examples, and framework-specific guidance, see `references/rule.md`' — and `references/rule.md` exists (835 lines) holding exactly the implementation detail and code examples the body defers. Content is appropriately split between overview and detail file with easy navigation, matching the top anchor.

5 / 5

Total

14

/

20

Passed

Description

58%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 'Use when' trigger and stays concise, but it is built around a review-process framing with a rule title pasted in mid-sentence, leaving the skill's real capability (convert fonts to WOFF2/WOFF with proper loading strategies) implicit. Trigger vocabulary is generic CSS-review language rather than the font-specific terms users would naturally say.

Suggestions

Lead with a concrete 'what' statement, e.g. 'Convert web fonts to WOFF2 with WOFF fallbacks, configure font-display, preloading, and subsetting', then follow with the 'Use when' clause.

Add natural font-specific trigger terms users would say: 'web fonts', 'font loading', 'WOFF2', 'font-display', '.woff2'.

Rewrite the grammatically awkward 'related to Optimize web font formats' so it reads as a capability ('related to web font optimization') rather than an embedded rule title, and narrow the trigger from broad 'reviewing stylesheets... responsive behavior' to font-related review.

DimensionReasoningScore

Specificity

The description names the domain ("Optimize web font formats", "stylesheets, component styles") and 1-2 concrete actions ("Check the rendered layout across breakpoints and interaction states", "proposing a fix"), but coverage is not comprehensive — the actual optimization work (converting to WOFF2, font-display, preloading) is never named as an action. It sits at the 'names domain and 1-2 concrete actions' anchor rather than 4, which expects several specific listed actions, and clearly above 2, which expects only generic actions.

3 / 5

Completeness

Both elements are present: an explicit trigger ("Use when reviewing stylesheets, component styles, and responsive behavior related to Optimize web font formats") and a what ("Check the rendered layout across breakpoints and interaction states before proposing a fix"). It falls short of 5 because the 'what' is process framing rather than the skill's actual capability (optimizing font formats), and the core purpose appears only as an awkwardly embedded title inside the when-clause rather than a concrete statement.

4 / 5

Trigger Term Quality

Relevant keywords are present ("stylesheets", "component styles", "responsive behavior", "web font formats"), but common natural phrasings users would actually say — "web fonts", "font loading", "WOFF2", "font-display", file extensions like ".woff2" — are missing, and the awkward embedded title "related to Optimize web font formats" is not a phrase a user would utter. Not 4 because the missing synonyms/extensions are the very terms that distinguish this skill; not 2 because it goes beyond one or two generic keywords.

3 / 5

Distinctiveness Conflict Risk

"Optimize web font formats" carves out a niche, but the leading trigger terms — "reviewing stylesheets, component styles, and responsive behavior" — are broad CSS-review territory that would also fire for general stylesheet or responsive-layout skills. Somewhat specific but with real overlap risk against sibling CSS rules; not 4 because the font-specific signal only appears late in an awkward phrase, and not 2 because it is far more targeted than 'helps with document files'.

3 / 5

Total

13

/

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.