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.
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. This is because JSX text
between tags is treated as string literals by the transpiler, not as JavaScript expressions.
**What fails:**
```jsx
{/* WRONG — renders literally as \u2019 */}
<p>Don\u2019t do this</p>
```
**What works (pick one):**
1. **Actual UTF-8 characters (preferred):** Paste the real character directly into the source file.
```jsx
<p>Don\u2019t do this</p> {/* This is the actual curly apostrophe character U+2019 */}
```
2. **JSX expression with string literal:** Wrap in curly braces so the JS engine interprets the escape.
```jsx
<p>Don{'\u2019'}t do this</p>
```
3. **HTML entity (HTML files only):** Use `’` — but this does NOT work in JSX/React.
**For bulk fixes via CLI**, use `sed` with raw UTF-8 bytes (not escape sequences):
```bash
CURLY=$(printf '\xe2\x80\x99') # U+2019 RIGHT SINGLE QUOTATION MARK
sed -i '' "s/don't/don${CURLY}t/g" file.tsx
```
**In JavaScript data arrays and string literals**, `\u2019` works correctly because the JS engine
processes the escape. The bug only affects JSX text content between tags.
### Dashes and Hyphens — Three Distinct Characters
| Character | HTML | Use |
|-----------|------|-----|
| - (hyphen) | `-` | Compound words (cost-effective), line breaks |
| – (en dash) | `–` | Ranges (1–10), connections (Sarbanes–Oxley Act) |
| — (em dash) | `—` | Sentence breaks—like this |
Never approximate with `--` or `---`. If you open with "from", pair with "to" not en dash. Hyphen for
compound names (marriage); en dash for joint authorship. Em dash typically flush; add ` ` if crushed.
No slash where en dash belongs. Hyphenate phrasal adjectives (five-dollar bills). No hyphen after -ly adverbs.
### Ellipses — One Character
Use `…` (…), not three periods. Spaces before and after; use ` ` on the text-adjacent side.
For interrupted dialogue, prefer em dash over ellipsis.
### Math and Measurement
Use `×` for multiplication, `−` for subtraction. Use `+` and `=` from keyboard.
En dash is acceptable as simple minus. Dimensions: 8.5″ × 14″ uses `×`.
**Foot and inch marks** — the ONE exception to curly quotes. Must be STRAIGHT: `'` for foot,
`"` for inch. Use ` ` between values: `6' 10"`.
### Trademark and Copyright
Use real symbols: `©` `™` `®`, never (c) (TM) (R). ™/® are superscripts, no space before.
© is inline, followed by ` ` then year. "Copyright ©" is redundant — word OR symbol, not both.
### Paragraph and Section Marks
`§` (§) and `¶` (¶) always followed by ` `: `§ 1782`. Spell out at sentence start.
Double for plurals: `§§`.
### Accented Characters
Proper names: accents are MANDATORY (François Truffaut, Plácido Domingo). Loanwords: check dictionary —
some naturalized (naive), some not (cause célèbre).
### Other Punctuation
- **Semicolons** join independent clauses. **Colons** introduce completion. Don't mix them
- **Question marks**: underused — simplify topic sentences with them
- **Exclamation points**: overused — budget ONE per long document. Never multiple in a row
- **Ampersands**: correct in proper names only. Write "and" in body text
- **Parentheses/brackets**: do NOT adopt formatting of surrounded material
- **Emoticons/emoji**: OK in email/Slack. Never in formal documents or professional UI copy
---
## Spacing
### One Space After Punctuation — Always
Exactly one space after any punctuation. Never two. Not debatable. Two spaces create rivers and
disrupt text balance. The period already contains visual white space.
### Nonbreaking Spaces
` ` prevents line break. Use before numeric refs (`§ 42`, `Fig. 3`), after ©
(`© 2025`), after honorifics (`Dr. Smith`), between foot/inch values.
### White-Space Characters
| Need | Tool |
|------|------|
| Space between words | One word space (spacebar) |
| Prevent line break | ` ` |
| New line, same paragraph | `<br>` |
| New paragraph | `<p>` tags |
| New page (print) | `page-break-before: always` |
| Suggest hyphenation point | `­` |
Never hold spacebar. Never double carriage returns for spacing. Never tabs for indentation in output.
HTML collapses all whitespace to single space (except ` `).
---
## Text Formatting
### Bold and Italic
**Rule 1**: Bold OR italic. Mutually exclusive. Never combine.
**Rule 2**: Use as little as possible. If everything is emphasized, nothing is.
Serif: italic for gentle, bold for strong. Sans serif: bold only — italic sans barely stands out.
Never bold entire paragraphs. Never use quotation marks for emphasis.
### Underlining — Never
Never underline in a document or UI. Typewriter workaround. Use bold or italic. For web links,
use subtle styling: `text-decoration-thickness: 1px; text-underline-offset: 2px`.
### All Caps — Less Than One Line, Always Letterspaced
Caps are harder to read (homogeneous rectangles vs varied lowercase contour). Suitable for short
headings, labels, captions. **ALWAYS** add 5–12% letterspacing. **ALWAYS** ensure kerning is on.
**NEVER** capitalize whole paragraphs. `letter-spacing: 0.06em` in CSS.
### Small Caps — Real Only
Never fake (scaled-down regular caps). Use `font-variant-caps: small-caps` with fonts that have
real small caps (OpenType `smcp`). System fonts lack them. Add letterspacing + kerning.
### Point Size
Print: 10–12pt. Web: 15–25px. The 12pt default is a typewriter relic. Half-point differences
matter. Use smallest increment for emphasis. Use `clamp()` for fluid web sizing.
### Letterspacing
5–12% extra on ALL CAPS and small caps. Nothing on lowercase. Never spread so far apart that
letters could fit in the gaps. CSS: `letter-spacing: 0.05em` to `0.12em`.
### Kerning — Always On
No exceptions. `font-feature-settings: "kern" 1; text-rendering: optimizeLegibility;`
### Ligatures
Mandatory only when fi/fl visually collide. Check bold and italic too. Otherwise optional.
CSS: `font-featRelated in Ads & Marketing
ads
IncludedMulti-platform paid advertising audit and optimization skill. Analyzes Google, Meta, YouTube, LinkedIn, TikTok, Microsoft, and Apple Ads. 250+ checks with scoring, parallel agents, industry templates, and AI creative generation.
banana
IncludedAI image generation Creative Director powered by Google Gemini Nano Banana models. Use this skill for ANY request involving image creation, editing, visual asset production, or creative direction. Triggers on: generate an image, create a photo, edit this picture, design a logo, make a banner, visual for my anything, and all /banana commands. Handles text-to-image, image editing, multi-turn creative sessions, batch workflows, and brand presets.
rpg-migration-analyzer
IncludedAnalyzes legacy RPG (Report Program Generator) programs from AS/400 and IBM i systems for migration to modern Java applications. Extracts business logic from RPG III/IV/ILE source code, identifies data structures (D-specs), file operations (F-specs), program dependencies (CALLB/CALLP), and converts RPG constructs to Java equivalents. Generates migration reports, complexity estimates, and Java implementation strategies with POJO classes, JPA entities, and service methods. Use when modernizing AS/400 or IBM i legacy systems, analyzing RPG source files (.rpg, .rpgle, .RPGLE), converting RPG to Java, mapping data specifications to Java classes, planning legacy system migration, or when user mentions RPG analysis, Report Program Generator, RPG III/IV/ILE, AS/400 modernization, IBM i migration, packed decimal conversion, or mainframe application rewrite.
brand-library-architect
IncludedBuild a complete brand library for a product — visual asset render pipeline, brand documentation set (BRAND, COPY, MANIFESTO, BIOS, FAQ, GLOSSARY, TONE, PRICING), open-source convention files (README, CONTRIBUTING, SECURITY, CODE_OF_CONDUCT), and a self-contained press kit. This skill should be used when the user asks to "build a brand library / brand kit / press kit / brand assets" for a product, "set up a brand library workflow," "create a positioning manifesto plus visual identity," or any combination of brand documentation + visual asset pipeline. Apply phase-by-phase or run end-to-end. Templates are product-agnostic and use {{TOKEN}} placeholders the skill prompts the user to fill.
writing-tech-post
IncludedAuthors engineering blog posts end-to-end: launch deep-dives, incident postmortems, architecture migrations, performance case studies, tutorials, AI/agent system writeups, security disclosures, and research-to-product translations. Picks the correct archetype, plans the abstraction ladder, enforces an evidence cadence (diagrams, benchmarks, profiles, traces, code, ablations), tunes voice against publisher house styles (Datadog, Vercel, GitHub, AWS, Meta, Cloudflare, Jane Street), and runs a pre-publish gate for narrative momentum and disclosure ethics. Use when drafting a new engineering post, restructuring a draft that feels flat, deciding which evidence form belongs where, validating that depth and product context are balanced, or preparing a postmortem, migration, or performance narrative for external publication. Do not use for API reference documentation, README authoring, marketing copy, release notes, generic SEO content, ghost-written executive thought leadership, or non-engineering long-form essays.
blog-google
IncludedGoogle API integration for blog performance: PageSpeed Insights, CrUX Core Web Vitals with 25-week history, Search Console performance, URL Inspection, Indexing API, GA4 organic traffic, NLP entity analysis for E-E-A-T, YouTube video search for embedding, and Google Ads Keyword Planner. Progressive feature availability based on credential tier (API key, OAuth/service account, GA4, Ads). Shares config with claude-seo at ~/.config/claude-seo/google-api.json. Use when user says "google data", "page speed", "core web vitals", "search console", "indexation", "GA4", "keyword research", "nlp entities", "blog performance", "youtube search", "google api setup".