skills.rest
dthompson-jti
dthompson-jtiCOMMUNITY
Explore all skills by this author →
GitHub

audit-typography

Validate UI typography against CSS design tokens and rules.

Updated Aug 27, 2026
Search Tags:#typography#readability#tokens#design-system#font-size#ui-accessibility#font-weight
One-click install
npx skills add https://github.com/dthompson-jti/safety-check-app-concept --skill audit-typography
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: audit-typography
Source: https://github.com/dthompson-jti/safety-check-app-concept/tree/main/.agent/skills/audit/typography
Command: npx skills add https://github.com/dthompson-jti/safety-check-app-concept --skill audit-typography

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps design teams enforce typography consistency and readability across UI by auditing token usage and visual hierarchy.

Core Features & Use Cases

  • Focus on font sizes and font weights alignment with design tokens
  • Validate line heights and visual hierarchy across headings and body text
  • Detect token misuses and provide actionable guidance for fixes

Quick Start

Run a typography audit against the project’s token definitions to produce a findings report

Frequently Asked Questions about audit-typography

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check font sizes and weights against design tokens in my UI?▼

To check font sizes and weights against design tokens, audit your UI by validating elements against var(--font-size-*) and var(--font-weight-*) definitions. This identifies typography inconsistencies and token misuses across screens.

What is typography token validation for design systems?▼

Typography token validation is the process of verifying font sizes, weights, and line heights against defined design tokens. It ensures visual hierarchy and readability consistency across headings and body text in a design system.

How do I audit line heights and visual hierarchy across my codebase?▼

You can audit line heights and visual hierarchy by validating UI elements against project typography rules. This process detects token misuses and provides actionable guidance to fix inconsistencies across screens.

Do I need specific documentation to run a typography audit?▼

Yes, running a typography audit requires access to SPEC-CSS.md and RULES-UI.md documentation. These files provide the token definitions and UI rules needed to verify compliance across your design system.

Can I use this to find token misuses in headings and body text?▼

Yes, you can use this to find token misuses by validating headings and body text against project typography rules. It detects incorrect font sizes and weights, providing actionable guidance for fixes.

Why does my UI typography look inconsistent across different screens?▼

UI typography looks inconsistent when font sizes, weights, and line heights deviate from design tokens. Auditing against var(--font-size-*) and var(--font-weight-*) definitions identifies these misuses and ensures compliance.

Related Skills

Explore More Design & Creative Skills→
madebyarismadebyaris
192

sdd-audit

Compare code implementations against spec documents to produce structured audit reports.

Community
Basic
OlatisunkanmiOlatisunkanmi
8

i-typeset

Assess typography and propose modular type scales with font pairings.

Community
Intermediate
jac007xjac007x

design-system-validator

Audit Walmart design-system compliance across tokens, components, and spacing.

Community
Advanced
sanky369sanky369
29

typography-system

Create modular type scales and accessible typography guidance for design systems.

Community
Basic