mcpField
A
audit-typography

audit-typography

github.com/mblodeDesign & UI16944 installsUpdated 2d ago
Repository

About audit-typography

audit-typography is a checklist-based skill for reviewing web typography, focused on concrete issues and fixes. It helps developers audit changed files by priority and report findings with file locations.

Key features

  1. 01Covers 89 rules across 10 categories
  2. 02Scopes audits to changed files or a full sweep
  3. 03Loads relevant rule guidance by category
  4. 04Prioritizes critical and high-impact checks
  5. 05Reports findings with file paths and fixes

Use cases

  1. 01Reviewing typography in changed CSS files
  2. 02Prioritizing issues in a web typography audit
  3. 03Verifying fixes by rerunning applicable rules

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/mblode/agent-skills --skill audit-typography

After installing, type/audit-typographyin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

rules/
_sections.md
_template.md
brand-capitalization.md
brand-color.md
brand-cross-medium.md
brand-dark-backgrounds.md
brand-equity.md
brand-identifiable-body.md
brand-licensing.md
brand-logo-typeface.md
display-cuts.md
display-drop-caps.md
display-grid-breaking.md
display-headline-opentype.md
display-headline-spacing.md
display-large-type.md
display-lead-paragraph.md
display-swashes.md
font-body-selection.md
font-condensed-extended.md
font-face-setup.md
font-fallbacks.md
font-monospaced.md
font-optical-sizes.md
font-quality.md
font-true-styles.md
font-variable-fonts.md
font-weight-body.md
hierarchy-body-first.md
hierarchy-caps-subheads.md

Details

From the project README

Audit Typography

89 rules across 10 categories for web typography quality. Focuses on concrete issues with concrete fixes.

Audit Workflow

Copy and track this checklist during the audit:

Audit progress:
- [ ] Step 1: Scope changed surfaces and select relevant categories
- [ ] Step 2: Run CRITICAL checks (punctuation, font setup)
- [ ] Step 3: Run HIGH checks (sizing, spacing)
- [ ] Step 4: Run MEDIUM+ checks for remaining categories in scope
- [ ] Step 5: Report findings with file:line and concrete fixes
  1. Audit only changed files unless a full sweep is requested.
  2. Scan CSS for font-family, @font-face, font-feature-settings, and sizing/spacing properties to identify relevant categories.
  3. Load rule files progressively by category prefix — read only what applies.
  4. Prioritize CRITICAL and HIGH findings before medium-priority polish.
  5. After fixes, rerun the relevant rules before finalizing.

Rule Categories by Priority

PriorityCategoryImpactPrefixRules
1Punctuation & Special CharactersCRITICALpunct-12
2Font Selection & WeightsCRITICALfont-10
3Sizing & MeasureHIGHsize-7
4Spacing & RhythmHIGHspacing-10
5OpenType FeaturesMEDIUM-HIGHopentype-8
6Hierarchy & ScaleMEDIUM-HIGHhierarchy-8
7Alignment & LayoutMEDIUMlayout-8
8Typeface PairingMEDIUMpairing-10
9Brand & IdentityLOW-MEDIUMbrand-8
10Display & HeadlinesLOW-MEDIUMdisplay-8

Quick Reference

Read only what is needed for the current audit scope:

  • Category map and impact rationale: rules/_sections.md
  • Rule-level guidance and examples: rules/<prefix>-*.md

Example rule files:

rules/punct-smart-quotes.md
rules/font-true-styles.md
rules/size-line-height.md

Each rule file contains:

  • Why the rule matters
  • Incorrect example
  • Correct example

Review Output Contract

Report findings in this format:

## Typography Audit Findings

### path/to/file.css
- [CRITICAL] `punct-smart-quotes`: Straight quotes used in heading text.
  - Fix: Replace `"` with `&ldquo;`/`&rdquo;` entities.

### path/to/clean-file.css
- ✓ pass
  • Group findings by file.
  • Use file:line when line numbers are available.
  • State issue and propose a concrete fix.
  • Include clean files as ✓ pass.

Comments

Markdown supported