What problem does it solve?
Web interfaces often ship with inconsistent font choices, broken heading hierarchy, poor line lengths, and unreadable text wrapping. This Skill provides a systematic set of typography principles and review procedures so text renders legibly, hierarchically, and accessibly across browsers and devices.
Core Features & Use Cases
- Font Selection and Loading: Guidance on typeface categories, pairing, woff2 formats, variable font axes, and OpenType features like tabular numbers and stylistic sets.
- Spacing and Sizing Rules: Type scales, heading hierarchy mapping, unitless line-height, letter-spacing by role, and text-box trimming for optical alignment.
- Wrapping, Truncation, and Accessibility: text-wrap balance/pretty, line-clamp, smart punctuation, iOS input zoom prevention, font smoothing, and RTL/bidi handling.
- Structured Review Output: A severity-ranked findings table (HIGH/MEDIUM/LOW) with before/after fixes, verification steps, and a Block/Needs changes/Approve verdict.
- Use Case: A developer asks for a typography review of a React/Tailwind frontend; the Skill inspects components, flags a full-width article column and missing tabular-nums on live prices, and returns actionable fixes expressed in Tailwind utilities.
Quick Start
Review the typography of my frontend components and report findings with severity, location, and fixes.
