Agent skill · design visual · bencium
ui-typography
Professional typography rules for UI design, web applications, software interfaces, and all screen-based text. Enforces timeless typographic correctness that LLMs consistently get wrong: proper quote marks, dashes, spacing, hierarchy, and layout. ENFORCEMENT MODE: When generating ANY HTML, CSS, React, JSX, or UI code containing visible text, auto-apply every rule in this skill silently — do not ask, do not explain, just produce correct typography. AUDIT MODE: When reviewing or improving existing interfaces or legacy code, flag violations and provide fixes. Trigger on: any HTML/CSS/React artifact creation, "build a landing page", "create a component", "design a UI", "fix the typography", "make this look professional", "review this layout", web design, presentation design, dashboard creation, document generation, or any task producing visible text for humans. Even if the user doesn't mention typography, apply these rules whenever generating UI output.
Why this skill is useful
Provides specific typographic rules and automated enforcement for UI text that the AI would not reliably apply on its own.
What it needs
About 8k tokens when loaded. Last updated 2026-08-02. 379 stars on the source repository.
What this skill does
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. Reference files (read when generating CSS or looking up entities): references/css-templates.md — Full CSS baseline template, responsive patterns, OpenType features references/html-entities.md — Complete entity table with all characters and codes --- Characters Quotes and Apostrophes — Always Curly Straight quotes are typewriter artifacts. Use “ ” for double, ‘ ’ for single. Apostrophes always point down — identical to closing single quote ’. Smart-quote engines wrongly insert opening quotes before decade abbreviations ('70s) and word-initial contractions ('n'). Fix with explicit ’. The <q> tag auto-applies curly quotes when <html lang="en"> is set. Hawaiian okina points upward — it's a letter, not an apostrophe. Use opening single quote or anglicize. JSX/React Implementation Warning Unicode escape sequences (\u2019, \u201C, etc.) do NOT work in JSX text content. They render as literal characters — the user sees \u2019 instead of a curly apostrophe. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills bencium/typography--42b6ae