Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add mblode/agent-skills --skill typography-auditgit clone --depth 1 https://github.com/mblode/agent-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/mblode/agent-skills/typography-audit)<a href="https://agentmods.dev/skills/mblode/agent-skills/typography-audit"><img src="https://agentmods.dev/badge/skills/mblode/agent-skills/typography-audit.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00068 | $0.01630 |
| Opus 5 | $0.00034 | $0.00815 |
| Sonnet 5 | $0.00014 | $0.00326 |
| Haiku 4.5 | $0.00007 | $0.00163 |
Grade A, and why
typography-audit scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 104 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Typography Audit
78 rules in 10 categories for web typography. Every finding names file, rule, and fix.
- IS: typography only: font loading, sizing, punctuation, spacing, hierarchy, text layout, OpenType features, typeface pairing, brand type, display type.
- IS NOT: broad UI review (accessibility, forms, navigation: use
ui-designAudit mode), or a redesign (new typefaces, scales: useui-designDirection mode).
Audit Workflow
Track this checklist:
Audit progress:
- [ ] Step 1: Scope. List changed files (or full sweep), map signals to categories
- [ ] Step 2: Run CRITICAL rules in scope (font-, size-, punct-)
- [ ] Step 3: Run HIGH rules in scope (spacing-)
- [ ] Step 4: Run remaining in-scope categories by descending priority
- [ ] Step 5: Report per the contract; every finding has file:line, rule ID, fix
- Scope to changed files unless a full sweep is requested. For a PR, use the diff against its actual base merge-base, including committed changes, filtered to
.css,.scss,.html,.tsx/.jsx, and template files. - Map code to categories via the signal table; skip categories with no signal.
- Load rule files by prefix (
rules/font-*.md, etc.), only for the categories the signals selected. - Run categories in priority order so CRITICAL findings surface even if the audit is cut short.
- After fixes, re-run only the rules that produced findings, then finalize the report.
Scoping Signals → Categories
| Signal in code | Categories to load |
|---|---|
@font-face, font-family, font files, variable fonts, font-stretch, transform: scaleX on text |
font- |
font-size, clamp(), media-query type changes, max-width on text, <em>/<strong>, text-decoration |
size- |
| Copy in HTML/JSX (headings, paragraphs, labels) | punct- |
line-height, letter-spacing, word-spacing, margin on text, text-transform: uppercase |
spacing- |
Heading elements, type scale tokens, --text-* properties |
hierarchy- |
text-align, lists, blockquotes, multi-column text |
layout- |
font-feature-settings, font-variant-*, figures/fractions in copy |
opentype- |
| Logo/wordmark styles, brand tokens, text color tokens, license comments | brand- |
Two or more distinct font-family values |
pairing- |
Hero/display sizes, drop caps, initial-letter |
display- |
What ships with it
60 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- evals/evals.json 1.4 KB
- rules/_sections.md 3.2 KB
- rules/_template.md 1.3 KB
- rules/brand-capitalization.md 957 B
- rules/brand-color.md 1.4 KB
- rules/brand-cross-medium.md 814 B
- rules/brand-dark-backgrounds.md 1.0 KB
- rules/brand-equity.md 1.3 KB
- rules/brand-identifiable-body.md 1013 B
- rules/brand-licensing.md 1.4 KB
- rules/brand-logo-typeface.md 1.1 KB
- rules/display-drop-caps.md 1.2 KB
- rules/display-grid-breaking.md 1.0 KB
- rules/display-headline-opentype.md 1.1 KB
- rules/display-headline-spacing.md 1.0 KB
- rules/display-large-type.md 1.0 KB
- rules/display-lead-paragraph.md 1.0 KB
- rules/display-swashes.md 892 B
- rules/font-body-selection.md 1.1 KB
- rules/font-condensed-extended.md 1.6 KB
- rules/font-face-setup.md 1.2 KB
- rules/font-fallbacks.md 1.1 KB
- rules/font-monospaced.md 839 B
- rules/font-optical-sizes.md 1.6 KB
- rules/font-quality.md 1.3 KB
- rules/font-rendering.md 966 B
- rules/font-true-styles.md 2.0 KB
- rules/font-variable-fonts.md 1.0 KB
- rules/font-weight-body.md 973 B
- rules/hierarchy-body-first.md 1.2 KB
- rules/hierarchy-caps-subheads.md 900 B
- rules/hierarchy-consistent-system.md 1.2 KB
- rules/hierarchy-heading-color.md 1.0 KB
- rules/hierarchy-heading-levels.md 1.0 KB
- rules/hierarchy-modular-scale.md 1.2 KB
- rules/hierarchy-size-contrast.md 951 B
- rules/hierarchy-weight-contrast.md 1016 B
- rules/layout-center-alignment.md 959 B
- rules/layout-justified-text.md 1.0 KB
- rules/layout-lists.md 1.5 KB
- rules/layout-optical-balance.md 995 B
- rules/layout-proximity-dividers.md 1.1 KB
- rules/layout-widows-orphans.md 1.5 KB
- rules/opentype-body-features.md 1.0 KB
- rules/opentype-kerning.md 1.2 KB
- rules/opentype-ligatures.md 1.1 KB
- rules/opentype-monoscript-kerning.md 1.1 KB
- rules/opentype-oldstyle-figures.md 1.1 KB
- rules/opentype-small-caps.md 1.1 KB
- rules/opentype-tabular-figures.md 933 B
- rules/pairing-contrast-harmony.md 1.9 KB
- rules/pairing-limit-typefaces.md 983 B
- rules/pairing-stress-skeleton.md 2.2 KB
- rules/pairing-superfamilies.md 1.0 KB
- rules/pairing-ui-fonts.md 1.0 KB
- rules/punct-abbreviations.md 767 B
- rules/punct-ampersands.md 732 B
- rules/punct-case-rules.md 1.3 KB
- rules/punct-daggers.md 796 B
- rules/punct-dashes.md 1.4 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- yesterday Changed · -12 lines · -136 tokens per session e2ebfd054195
- 7d ago First seen · 116 lines · 204 tokens per session scan A faf8afe4c449
typography-audit is a skill published in the GitHub repository mblode/agent-skills (103 stars, last pushed yesterday), licensed MIT. It adds 68 tokens to every session and 1,630 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
claude-design
Design one-off HTML artifacts (landing, deck, prototype).
sketch
Throwaway HTML mockups: 2-3 design variants to compare.
popular-web-designs
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
impeccable
Frontend design guidance, upstream-maintained (impeccable).
frontend-design
Guidance for distinctive, intentional visual design when building or reshaping UI, HTML/React artifacts, dashboards, charts, and visual reports. Use before implementation to choose a content-specific structure, typography, and visual system that does not read as a templated default.
design-preview
A method for turning an existing or proposed interface into a self-contained HTML preview that can be opened and checked in Chrome.