CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

web-typography

Select, pair, and implement typefaces for web projects. Use when the user mentions "font pairing", "which typeface", "line height", "responsive typography", "web font loading", "type hierarchy", "variable fonts", "FOUT/FOIT", or "typographic scale". Also trigger when choosing between system fonts and web fonts, optimizing font loading performance, or designing readable long-form content layouts. Covers readability evaluation, CSS implementation, and performance optimization. For overall UI design systems, see refactoring-ui. For dramatic typographic experiences, see top-design.

Quality

82%

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

SKILL.md
Quality
Evals
Security

Quality

Content

60%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 delivers genuinely useful, concrete typography guidance — specific measurements, named typeface pairings, and mostly executable CSS — supported by a real, well-organized one-level-deep reference bundle. Its main weakness is token efficiency: heavy "Why it works"/"Ethical boundary" prose, an author biography, and per-context tables restate knowledge Claude already has instead of trusting the reference files to carry the detail.

Suggestions

Cut the "Why it works" and "Ethical boundary" paragraphs plus the "About the Author" and "Further Reading" sections — keep the numeric rules, named pairings, and CSS; trust Claude to already understand saccades, legibility, and serif+sans contrast.

Move the six-row "Product applications" tables into the corresponding references/ files, keeping SKILL.md as a lean overview with the key numbers and one code snippet per topic.

Replace the invalid range declarations (e.g., "h1, h2 { line-height: 1.1-1.25; }") with single executable values or a short comment explaining the acceptable range.

DimensionReasoningScore

Conciseness

The ~390-line body pads each of seven sections with "Why it works" and "Ethical boundary" paragraphs that re-explain concepts Claude already knows (saccades/bouma, legibility vs. readability, serif+sans contrast, how clamp() works), and ends with an irrelevant "About the Author" biography and an affiliate "Further Reading" link — several unnecessary explanations and padded sections, not just "some".

2 / 5

Actionability

The guidance is mostly executable: copy-paste CSS for .prose, font stacks, @font-face with font-display: swap, clamp() hierarchies, and specific numbers like 65ch / 1.4–1.8 / 200KB covering the common cases. The minor gap keeping it from a 5 is non-executable range declarations inside code blocks, e.g. "h1, h2 { line-height: 1.1-1.25; }" and ".ui-text { line-height: 1.3-1.4; }".

4 / 5

Workflow Clarity

The seven numbered framework sections form a logical progression (reading mechanics → evaluation → selection → pairing → measurement → hierarchy → responsive/loading), and the "Quick Diagnostic" checklist plus the "Scoring" section (rate 0–10, state improvements to reach 10/10) provide verification checkpoints. It falls short of a 5 because the sections are topical rather than procedural — no explicit instruction on which steps to follow in what order, and no error-recovery guidance.

4 / 5

Progressive Disclosure

All five referenced files exist in references/, are one level deep, and are well signaled both per-section ("See: references/…") and in a consolidated "Reference Files" index. However, the body inlines six-row application tables and extensive explanatory prose per section that belong in those reference files, so content is not appropriately split between overview and bundle.

4 / 5

Total

14

/

20

Passed

Description

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

An exemplary description: concrete actions, an explicit "Use when…" clause with abundant natural trigger terms, and explicit routing guidance to avoid conflicts with adjacent design skills. The only minor weakness is that the coverage sentence lists topic areas ("CSS implementation", "performance optimization") rather than equally concrete actions.

DimensionReasoningScore

Specificity

"Select, pair, and implement typefaces for web projects" lists several concrete actions, and "Covers readability evaluation, CSS implementation, and performance optimization" broadens coverage, but that second sentence names topic areas rather than additional concrete actions — a minor gap versus the comprehensive action-listing of a 5.

4 / 5

Completeness

It explicitly answers both questions: what ("Select, pair, and implement typefaces for web projects") and when ("Use when the user mentions…" followed by concrete trigger phrases), matching the top anchor exactly; voice is third-person imperative throughout.

5 / 5

Trigger Term Quality

Nine quoted natural phrases users would actually say ("font pairing", "which typeface", "line height", "responsive typography", "web font loading", "type hierarchy", "variable fonts", "FOUT/FOIT", "typographic scale") plus three additional trigger conditions ("choosing between system fonts and web fonts, optimizing font loading performance, or designing readable long-form content layouts") give comprehensive coverage including synonyms.

5 / 5

Distinctiveness Conflict Risk

A clear typography niche with distinct triggers, and it even provides explicit disambiguation against neighboring skills ("For overall UI design systems, see refactoring-ui. For dramatic typographic experiences, see top-design."), minimizing conflict risk.

5 / 5

Total

19

/

20

Passed

Validation

100%

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

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

valeriibeck-star/claude-skills

Path

skills/web-typography/SKILL.md

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.