Skip to content
Get packs

Better Typography

Makes an AI agent review and fix how text renders: type scale, spacing, wrapping, fonts and punctuation.

Source Download skill
Repository
jakubkrehel/skills
Stars
10,236
Licence
MIT
Files
8 files

What it does

Once installed, the agent checks and corrects how text looks in a web interface. It applies rules for font sizes, line-height, letter-spacing, line length, wrapping, truncation, numbers that change, and typographic punctuation, and writes the fixes into the project's existing styling system (it maps declarations to Tailwind utilities). It is written as a set of reference guides the agent reads, not a standalone app.

Great for

  • Front-end developers polishing the look of a web app or marketing site
  • Designers handing off type rules who want them applied consistently in code
  • Teams that want a shared type scale with semantic names like text-body-sm

Skip it if

  • Projects that do not use CSS or a web front end, since the guidance is about browser rendering
  • Teams that need a brand-new typeface chosen; the skill says it avoids proposing new fonts unless asked, so it is not a font-selection tool
  • Copy editing or accessibility audits on their own; the skill points those to other skills for wording, semantics and contrast

Try asking

  • “Review the typography in this React app and fix line-height, weights and sizes that break the type scale”
  • “Make the headings and card descriptions wrap better and stop orphaned words on the last line”
  • “Add tabular numbers to the price and timer components so digits don't shift”
  • “Stop iOS Safari zooming when a user focuses the form inputs”
Step-by-step guide: how to use Better TypographyInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 8 original files, the MIT licence and an attribution note.

    better-typography.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip better-typography.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip better-typography.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Tell the agent whether your project uses Tailwind or plain CSS so fixes land in the right place.
  • Say whether the team needs semantic size names or default names like text-sm; the skill treats these differently.
  • For mobile input zoom fixes, specify which option you want, since the two recipes look different on small screens.

What's inside

  • agents/openai.yaml
  • choosing-fonts.md
  • css-cheat-sheet.md
  • details-and-accessibility.md
  • SKILL.md
  • spacing-and-sizing.md
  • variable-fonts-and-opentype.md
  • wrapping-and-punctuation.md

Redistributed unmodified from jakubkrehel/skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.