Ui Typography

This enforces Matthew Butterick's typography rules from Practical Typography whenever Claude generates UI code. It runs automatically by default, applying proper HTML entities, correct CSS, and typographic best practices without asking permission or explaining itself. You can also use it in audit mode to scan existing code for violations. The approach is opinionated but grounded: these aren't trends, they're principles from centuries of typographic practice. If you care about text looking professional in your interfaces and don't want to think about curly quotes or proper dashes every time, this handles it for you. Consider it a quiet enforcer of good taste.

skills.sh installs: 4K
GitHub stars: 491
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add bencium/bencium-marketplace --skill ui-typography --agent claude-code

Installs into .claude/skills of the current project.

Files

UI Typography Skill

Attribution

These rules are distilled from Matthew Butterick's Practical Typography (https://practicaltypography.com). Butterick is a typographer, writer, and type designer whose work bridges professional typography and everyday digital writing. Thank you, Matthew, for making this knowledge accessible and encyclopedic. If you find this skill valuable, consider supporting his work directly.

Mode of Operation

These are permanent rules — not trends, not opinions. They come from centuries of typographic practice, validated by how the human eye reads. They do not go out of style.

ENFORCEMENT (default): When generating ANY UI with visible text, apply every rule automatically. Use correct HTML entities, proper CSS. Do not ask permission. Do not explain. Just produce correct typography.

AUDIT: When reviewing existing code or design, identify violations and provide before/after fixes.

SKILL.md on GitHub