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.

60

Quality

70%

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

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 compact, well-structured overview that defers detail cleanly to one real reference file, but it sacrifices actionability by keeping all executable @font-face code in the reference and provides no verification checkpoints in its review workflow.

Suggestions

Add one copy-paste-ready @font-face example (WOFF2 + WOFF fallback with font-display: swap) directly in the body so the skill is actionable without opening the reference.

Insert an explicit verification step in the Check/Fix flow, e.g. 'Confirm the font loads with font-display: swap and test rendering across breakpoints and target browsers before considering the fix done.'

Collapse the redundant '## Explain / Explain how...' header-body phrasing and drop the duplicated 30-50% statistic that already appears in rule.md to tighten the body further.

DimensionReasoningScore

Conciseness

The body is lean (~30 lines), assumes Claude's competence, and avoids explaining basics, with only minor trimmable redundancy (e.g., the '## Explain / Explain how...' header-body echo and the 30-50% stat duplicated in rule.md).

4 / 5

Actionability

The Quick Reference gives concrete directives (WOFF2 primary, font-display: swap, preload/subset) but the body contains no executable @font-face code or commands — all concrete examples are deferred to references/rule.md, and the Check/Fix/Explain sections stay abstract.

3 / 5

Workflow Clarity

The Check/Fix/Explain/Code Review structure gives a rough ordered sequence, but there are no validation or verification checkpoints (e.g., confirm the font loads, test across browsers), so the workflow stays at the 'steps listed but checkpoints implicit' level.

3 / 5

Progressive Disclosure

The body is well-organized into clear sections and cleanly signals one one-level-deep reference ('see references/rule.md'), which exists in the bundle, giving easy navigation with no nested references.

5 / 5

Total

15

/

20

Passed

Description

75%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 clearly targets web-font-format review with an explicit 'Use when' trigger and several concrete actions, landing solidly above the midpoint. It loses the top score for omitting concrete fix actions and standalone natural font terms.

DimensionReasoningScore

Specificity

Names the web-font domain plus several concrete actions ('reviewing stylesheets, component styles, and responsive behavior', 'Check the rendered layout across breakpoints and interaction states', 'before proposing a fix'), but stops short of listing the actual fix actions (convert to WOFF2, preload, subset).

4 / 5

Completeness

Explicitly answers both what (review/check layout) and when (opens with 'Use when reviewing stylesheets... related to Optimize web font formats'), though the when-clause could be more specific about user cues.

4 / 5

Trigger Term Quality

Includes natural frontend terms a user would say ('stylesheets', 'component styles', 'responsive behavior', 'breakpoints', 'interaction states'), but omits common natural phrases like 'web fonts', 'WOFF2', and '@font-face'.

4 / 5

Distinctiveness Conflict Risk

The web-font-format niche and code-review framing ('before proposing a fix') are mostly distinct, though 'reviewing stylesheets, component styles, and responsive behavior' is broad enough to overlap with general CSS review skills.

4 / 5

Total

16

/

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.

Validation15 / 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.