mblode/typography-audit
skills/typography-audit/SKILL.md
Audits web typography against 78 rules in 10 categories: font selection and @font-face setup, sizing and measure, punctuation, spacing and rhythm, hierarchy, alignment and layout, OpenType features, brand identity, typeface pairing, and display type. Reports file:line findings with concrete CSS/HTML fixes ordered by impact. Use when writing or reviewing CSS/HTML for text, selecting or pairing typefaces, configuring font-feature-settings or @font-face, building a type scale, or asking "audit my typography", "fix the fonts", "review my type system", "why does this text look off". Triggers on font-family, font-size, line-height, letter-spacing, smart quotes, em dashes, faux bold or italic, variable fonts, widows and orphans. For whole-UI audits beyond type (accessibility, forms, navigation), use ui-audit; for choosing a visual direction or designing a new type system, use ui-design.
$ install --global
skillsauthnpx skillsauth add mblode/agent-skills typography-auditInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jul 26, 2026, 3:14 AM104.9s93 files scanned
SKILL.md
- name:
- typography-audit
- description:
- >-
- Audits web typography against 78 rules in 10 categories:
- font selection and
- pairing, and display type. Reports file:
- line findings with concrete CSS/HTML
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-audit), or a redesign (new typefaces, scales: useui-design).
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:
git diff --name-onlyfiltered 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 all 78 rule files. Load only the prefixes the signal table selects.
- 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. - 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-audit: broad frontend quality (accessibility, forms, navigation, motion); its typography coverage is shallower.ui-design: choosing typefaces, scales, and visual direction from scratch; run when a finding becomes a redesign request.copywriting: heading and label wording. This skill governs only the casing of that copy (punct-case-rules).
Related Skills
mblode/tidy
development
VerifiedTrustedCommunity
Fans out four concurrent review agents over the current diff, then APPLIES fixes directly to the working tree and verifies the build. Mutates code; it does not produce a report. Covers reuse (duplicate logic, hand-rolled stdlib, reinvented platform features), quality (hacky patterns, React/TypeScript hygiene, over-memoisation, exhaustive-deps, `any`, dead code, `CLAUDE.md`/`AGENTS.md` violations), efficiency (unnecessary work, missed concurrency, hot-path bloat), and test discipline (bug fixes without a repro test, useless tests to delete, missing tests only when they prevent a named failure). Use when the user says "tidy this up", "simplify", "clean up this diff", "polish my changes", "check for duplication", or "any reuse opportunities?", i.e. when the intent is to have the changes made automatically. For a read-only report that lists findings without touching files, use `pr-reviewer` instead. This skill edits code; for the PR's title, description, or commit history, use `pr-creator`.
69SKILL.mdUpdated Jul 2, 2026
mblode/product-design
development
VerifiedTrustedCommunity
Decides what an interface should do before UI is built or audited: interaction choice, action scope and consequence, reachable states, resilience, and accessibility as task completion. Works from a brief, spec, mockup, intent, or existing UI. Use when asked "is this the right interaction", "design the flow", "what control should this use", "what should this action affect", "which states should this have", "make this resilient", or "what breaks here". For building or styling use ui-design; for built-code audits use ui-audit; for copy wording use copywriting.
69SKILL.mdUpdated Jun 28, 2026
mblode/planning
development
VerifiedTrustedCommunity
Builds and stress-tests implementation plans in two modes. Create mode scans code and docs, asks one question at a time with a recommended answer, runs a blindspot pass when the user is new to the area, then writes a plan file. Review mode scores completeness, feasibility, scope, testability, risk, and assumptions, verifies checkable claims, and writes resolutions back until every dimension reaches 5/5. Use when asked to "create a plan", "plan this feature", "I want to build X", "grill me", "think this through", "blindspot pass", "unknown unknowns", "this is new to me", "review my plan", "rubber duck this", "stress test this plan", "is this plan ready", "get this plan to 5/5", "what am I missing", "verify this claim", "prove this plan", "fact-check this plan", or when the user explicitly wants a plan artifact before implementation. For code review use pr-reviewer; for architecture briefs use define-architecture.
69SKILL.mdUpdated Jun 28, 2026
mblode/dx-audit
tools
VerifiedTrustedCommunity
Audits the smallest relevant developer-facing surface of a library, CLI, SDK, or npm package across API contracts, errors, CLI behavior, public types, onboarding, and config. Uses candidate-first rule loading, bounded local evidence, and compact root-cause findings. Use when asked to "audit my CLI", "make this CLI agent-friendly", "is this API ergonomic", "review the developer experience", "improve these errors", "simplify first run", or "review my SDK". For end-user UI use ui-audit, for agentic-app trust use ax-audit, for docs prose use docs-writing, for README work use readme-creator, and for repo architecture use define-architecture. Inside a product that also ships a UI, this is the skill for the developer-facing half, so pick it when the complaint is about an import, command, error string, exported type, or config rather than a screen.
69SKILL.mdUpdated Jun 28, 2026