Ui Typography

bencium/bencium-claude-code-design-skill

This is a typography enforcement layer built on Matthew Butterick's Practical Typography. It automatically applies proper typographic rules to any UI code you generate: correct HTML entities, proper spacing, real punctuation marks instead of ASCII shortcuts. The default mode is strict enforcement, meaning Claude applies these rules without asking, which is either exactly what you want or slightly annoying depending on your workflow. There's also an audit mode for reviewing existing code. It's opinionated by design, treating typography as permanent rules rather than preferences. Good fit if you care about text rendering and don't want to remember the difference between hyphens, en dashes, and em dashes every time you write interface copy.

skills.sh installs: 564
GitHub stars: 333
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add bencium/bencium-claude-code-design-skill --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