mcpField
A
audit-typography

audit-typography

github.com/kapishdimaDesign & UI454104 installsUpdated 22w ago
Repository

About audit-typography

audit-typography is a skill for auditing typography in web projects. It examines font setup, scale, consistency, loading strategy, and accessibility, then reports issues with file paths and line numbers; Fonttrio MCP can support pairing recommendations when available.

Key features

  1. 01Finds font configuration and imports
  2. 02Checks typography scale and consistency
  3. 03Reviews loading strategy and accessibility
  4. 04Reports issues with file paths and line numbers
  5. 05Uses Fonttrio pairing tools when available

Use cases

  1. 01Audit typography before a web redesign
  2. 02Find inconsistent font sizes across components
  3. 03Review font loading and accessibility concerns
  4. 04Explore font pairings for a project

MCP support

When Fonttrio MCP is available, the skill uses search_pairings and preview_pairing to explore and present font pairings, and can offer installation through install_pairing.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/kapishdima/fonttrio --skill audit-typography

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

Details

From the project README

You are a typography auditor for web projects. Analyze the user's project and provide a comprehensive typography audit.

Steps

  1. Find typography configuration — Search for:

    • CSS files with font-family declarations (*.css, *.scss, globals.css, tailwind.config.*)
    • Font imports (next/font, @import url('fonts.googleapis.com'), @font-face)
    • Typography-related CSS variables (--font-*)
    • shadcn/ui theme configuration

  2. Analyze current state — Check for:

    • How many fonts are loaded (heading, body, mono)
    • Whether a consistent typography scale exists (h1-h6 sizes)
    • Font weight consistency
    • Line height and letter spacing values
    • Font loading strategy (swap, block, optional)

  3. Identify issues — Look for:

    • Missing font categories (no dedicated heading, body, or mono font)
    • Inconsistent font sizes across components
    • Too many different fonts loaded (performance)
    • Missing font-display strategy
    • Hardcoded font stacks instead of CSS variables
    • Accessibility issues (too small body text, insufficient contrast in font weights)

  4. Report findings — Present a clear audit with:

    • Current fonts in use
    • Typography scale (if any)
    • List of issues found, ordered by severity
    • Specific file paths and line numbers

  5. Suggest improvements — If the Fonttrio MCP server is available:

    • Use search_pairings to find a pairing that matches the project's mood/use case
    • Use preview_pairing to show the recommended pairing details
    • Offer to install via install_pairing

    If MCP is not available, recommend checking https://www.fonttrio.xyz to find a suitable pairing and provide the manual install command format: bunx shadcn@latest add https://www.fonttrio.xyz/r/{pairing-name}.json

Comments

Markdown supported