typography-audit
Audits font loading, type scales, measure, spacing, OpenType, and rendered punctuation with 78 scoped rules. Use when asked to "audit typography", "fix the fonts", or "review my type system". For a new visual direction use ui-design Direction; for general UI defects use ui-design Audit.
- Installs
- 1K
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/mblode/agent-skills --skill typography-audit- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads typography-audit automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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- |
Rule Categories by Priority
| Priority | Category | Impact | Prefix | Rules |
|---|---|---|---|---|
| 1 | Font Selection & Weights | CRITICAL | font- | 11 |
| 2 | Sizing & Measure | CRITICAL | size- | 6 |
| 3 | Punctuation & Special Characters | CRITICAL | punct- | 12 |
| 4 | Spacing & Rhythm | HIGH | spacing- | 8 |
| 5 | Hierarchy & Scale | MEDIUM-HIGH | hierarchy- | 8 |
| 6 | Alignment & Layout | MEDIUM | layout- | 6 |
| 7 | OpenType Features | MEDIUM | opentype- | 7 |
| 8 | Brand & Identity | MEDIUM | brand- | 8 |
| 9 | Typeface Pairing | MEDIUM | pairing- | 5 |
| 10 | Display & Headlines | LOW-MEDIUM | display- | 7 |
Category map and impact rationale: rules/_sections.md. Each rule file gives why it matters plus an incorrect and a correct example. Category impact reflects the category's worst-case rules; report findings with the rule's own frontmatter impact, which frequently differs (e.g. brand-color is HIGH inside the MEDIUM brand- category because it holds the WCAG contrast floor).
Review Output Contract
Report findings as:
## Typography Audit Findings
### path/to/file.css
- [CRITICAL] `punct-smart-quotes` (file.css:42): Straight quotes in heading copy.
- Fix: Replace `"` with `“`/`”` (or UTF-8 curly quotes).
- [CRITICAL] `size-line-height` (file.css:18): `line-height: 20px`, a fixed value the 48px `h1` inherits, so its lines overlap.
- Fix: Use unitless `line-height: 1.5`.
### path/to/clean-file.css
- ✓ pass
- Group by file; order by impact within file.
- Every finding: impact tag, rule ID,
file:line, one-line issue, fix. - Include clean files as
✓ passso coverage is visible. - End with a summary: counts per impact level.
Gotchas
- Don't preload every rule file. Load only the prefixes the signal table selects; a full load spends the budget on categories with no signal in scope.
- Report the rule's frontmatter
impact, never the category's. Two rules get misreported most:brand-coloris HIGH (an accessibility floor, not a brand nicety) andpunct-daggersis LOW-MEDIUM (decoration, despite sitting in a CRITICAL category). - Punctuation rules apply to rendered copy only. Flagging straight quotes or
--inside<code>,<pre>, or JS/TS string literals is a false positive; "fixing" them breaks the code. - Confirm the rendered font and computed styles through
ui-verificationwhen a finding depends on them. A CSS declaration alone does not prove which face loaded. - Don't flag missing OpenType features without confirming the loaded font ships them. Browsers silently ignore unsupported
font-feature-settingstags, so the fix does nothing. - Every finding needs
file:lineand a concrete fix; an unactionable finding forces a redo. - An audit is not a redesign. Proposing new pairings or scales turns a 10-minute review into a design project; flag the issue and route redesign asks to
ui-design. - Don't equalize priorities. A LOW-MEDIUM
display-nit above a CRITICAL faux-bold finding buries what actually looks broken.
Related Skills
ui-designAudit mode: broad frontend quality (accessibility, forms, navigation, motion); its typography coverage is shallower.ui-designDirection mode: choosing typefaces, scales, and visual direction from scratch; run when a finding becomes a redesign request.ghostwriter: heading and label wording. This skill governs only the casing of that copy (punct-case-rules).
Maintenance only: evals/evals.json contains regression scenarios for changes to this skill; it does not load during a user task.
FAQ
What does the typography-audit skill do?
Audits font loading, type scales, measure, spacing, OpenType, and rendered punctuation with 78 scoped rules. Use when asked to "audit typography", "fix the fonts", or "review my type system". For a new visual direction use ui-design Direction; for general UI defects use ui-design Audit.
How do I install typography-audit?
Run npx skills add https://github.com/mblode/agent-skills --skill typography-audit in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/typography-audit/ (personal) or .claude/skills/typography-audit/ (project).
Which AI agents can use typography-audit?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is typography-audit safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains typography-audit?
It is published by mblode in mblode/agent-skills. It has 1,031 recorded installs.
More from mblode/agent-skills
ui-animation
mblode/agent-skills
Builds, reviews, and measures UI motion, including springs, gestures, scroll effects, curve fitting from recordings, and sparse interface sound. Use when asked to "add animation", "match this easing", "reverse engineer this motion", "add a click sound", or find animation opportunities.
multi-tenant-architecture
mblode/agent-skills
Designs tenant isolation, hostname routing, custom-domain lifecycle, and plan limits on Cloudflare or Vercel. Use when asked to "isolate tenant data", "support custom domains", "build a white-label platform", or assess PSL registration. For general module structure use codebase-architecture; for SEO content use seo.
ui-design
mblode/agent-skills
Designs and builds React/Next/Tailwind UI, audits visual and interaction defects, and stress-tests components with worst-case data. Use when asked to "build a landing page", "extract our design system", "add dark mode", "make this responsive", "remove UI slop", "audit this component", "stress-test this component", "break this UI", or "show me the worst case".
agent-skills-creator
mblode/agent-skills
Creates and improves portable Agent Skills with a validator, routing scenarios, and evidence-based keep, cut, merge, or retire decisions. Use when asked to "write a skill", "update all skills", "audit my SKILL.md", "remove redundant instructions", or fix skill triggering.
docs-writing
mblode/agent-skills
Writes and audits technical docs with Diataxis type gating, runnable examples, and 51 documentation rules. Use when asked to "review my docs", "write an API reference", or improve a documentation page. For a whole README use readme-creator; for agent instructions use agents-md.
presentation-creator
mblode/agent-skills
Builds decks with a story spine, house visual system, setting-specific density, and speaker notes. Use when asked to "create a presentation", "write a pitch deck", or "turn this doc into slides". Defaults to Marp; use an available presentation tool for editable PowerPoint.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.