Guide · Agent skill
How to use the Better Typography agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The better-typography skill is a set of reference guides that an AI coding agent reads before it changes how text looks in a web interface. It covers type scale, line-height, letter-spacing, line length, wrapping, truncation, tabular numbers and typographic punctuation. This guide explains what the skill does, how to install it, how to ask for it, and where its limits are.
Better Typographyjakubkrehel/skills · MIT Download the skill Quick start
- 1Download the ZIP. Download the better-typography ZIP from this page and unzip it. The folder contains SKILL.md and reference guides.
- 2Place the folder. Move the better-typography folder into ~/.claude/skills/ for personal use, or into .claude/skills/ in a project for that repository only.
- 3Or upload it in the apps. In the Claude apps, open Settings → Capabilities → Skills and upload the skill there instead.
- 4Describe the text problem. Ask in plain language, naming the page or component and the change you want, such as fixing wrapping or truncation.
- 5Review the diff. Check the changes the agent writes into your styling system, especially letter-spacing and scale decisions that are judgment calls.
What an agent skill is and what this one does
An agent skill is a folder of instructions that an AI agent loads when a task matches it. The better-typography skill is not a standalone app. Its main file, SKILL.md, is supported by reference guides the agent reads as needed.
Once installed, the agent checks and corrects how text renders in a web interface. It applies rules for font sizes, line-height, letter-spacing, line length, wrapping, truncation, numbers that change, and typographic punctuation. It writes the fixes into your project's existing styling system and maps declarations to Tailwind utilities where relevant.
- Sets a type scale and pairs each size with its line-height and weight
- Flags values such as unitless line-height, weight 400 or heavier below 18px, and a 60–75 character measure
- Uses tabular-nums on timers, counters, prices and numeric table columns
- Replaces straight quotes with curly quotes, en dashes and the ellipsis character in rendered text
Install the skill from the ZIP
Download the ZIP for better-typography from this page and unzip it. The skill folder is named better-typography and contains SKILL.md, agents/openai.yaml and several reference files.
For a single personal setup, place the folder in ~/.claude/skills/. For one project only, place it in the project's .claude/skills/ folder so it travels with that repository.
You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/better-typography
- Project: .claude/skills/better-typography inside your repository
~/.claude/skills/better-typography/SKILL.mdTrigger the skill with natural requests
You do not need a special command. Describe the text problem in plain language, and the agent will use the skill when the request matches its description: setting or reviewing how text renders, from the type scale and spacing to font features, wrapping, truncation and punctuation.
Name the part of the page you care about and the change you want. The more specific the request, the more precise the fix.
- Review the typography on the pricing page and fix anything that breaks the type scale.
- Stop the product titles on cards from wrapping onto awkward single words.
- Make the countdown timer digits stop shifting as they change.
- Truncate the job descriptions in the list to three lines with a link to the full text.
- Replace the straight quotes and double hyphens in the marketing copy with proper typographic punctuation.
Understand what the agent will change and what it will leave alone
The skill separates measured rules from judgment calls. Unitless line-height, weight 400 or heavier below 18px, a 60–75 character measure, 16px inputs on iOS and tabular-nums on changing values are treated as findings when missed. Letter-spacing, font pairing and scale ratios are heuristics, reported only where they break the project's own scale.
The skill avoids proposing a new typeface unless your task asks for a type change. It also points wording, semantic heading structure, contrast, layout and motion to other skills rather than handling them itself.
- Asks which fix you want when two valid options change the look differently, such as the two ways to keep iOS inputs at 16px
- Recommends text-wrap: balance for headings and short descriptions, and text-wrap: pretty for paragraphs
- Keeps interface text at text-align: start
Get the most from the skill
Give the agent a clear target. Name the page, component or file, and say whether the project uses Tailwind or plain CSS. The skill's cheat sheet lists each declaration in plain CSS and as its Tailwind 4 equivalent, so the agent can match your codebase.
Review diffs for the judgment-based changes. Letter-spacing, pairing and scale ratios are heuristics, so check them against your design before accepting.
- Mention whether the project uses CSS Modules, styled-components, StyleX or Tailwind
- Ask for a truncation pattern that includes a way to see the full text, since the skill notes this belongs to layout work
- For team projects, ask for semantic size names such as text-body-sm so the rules are clear to others
What people use it for
- Tightening headings and body copy on a marketing site so line-height and letter-spacing follow a consistent scale
- Stopping numbers in dashboards and timers from shifting width as they update
- Setting 16px input text on mobile so iOS Safari does not zoom the page
- Clamping card descriptions to three lines with consistent line-height
- Converting straight quotes and dashes in rendered copy to typographic characters
Frequently asked questions
Is the better-typography skill free?
The skill is published under the MIT licence. Check the licence file in the source repository for the full terms before you reuse it in a commercial project.
What does the better-typography skill require?
The skill lists no requirements. It runs no scripts and uses no network access. It is written for web front ends, since its guidance is about browser rendering.
Does the skill choose new fonts for my project?
No. It avoids proposing a new typeface, paid or free, unless the task asks for a type change. It is not a font-selection tool.
Does it work with Tailwind?
Yes. The skill maps CSS declarations to Tailwind utilities, such as truncate for one-line truncation and line-clamp-3 for three lines. It also works with plain CSS, CSS Modules, styled-components and StyleX.
Can it check copy editing or accessibility?
Not on their own. The skill refers wording to better-writing, semantic heading structure and contrast checks to better-accessibility, and spatial RTL layout to better-layout. Install those skills for those tasks.
Why did the agent not change my font?
The skill only changes typeface when your task asks for a type change. Otherwise it keeps your existing fonts and fixes how they are sized, spaced and wrapped.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use better-typography if you are a front-end developer or designer who wants an agent to apply consistent type rules in a web project's existing styling system. Pick something else if your project has no CSS or web front end, if you need a new typeface chosen, or if you need a standalone copy edit or accessibility audit.
Download the skill