Better Typography for AI Agents: A Practical Skill

Where this fits

You're reviewing a pull request that adds a new product card. The text truncates awkwardly, the line-height is cramped, and the heading hierarchy is off. You could manually fix each issue, but that's tedious. The better-typography skill gives your coding agent the same expertise—so it can catch and correct typography problems before you ever see them.

Why agents benefit

• Evaluates font choices and pairings based on context (headline vs. body, marketing vs. UI) and suggests appropriate typefaces.
• Configures variable fonts and OpenType features like tabular numbers, ligatures, and font-feature-settings without guessing.
• Sets up a coherent type scale with consistent spacing and line-height, replacing arbitrary pixel values.
• Checks accessibility—contrast, text-wrap, and iOS input zoom—so text remains legible across devices.
• Reviews code for common issues like missing truncation, poorly styled underlines, or incorrect heading levels, and proposes fixes.

Practical scenarios

Fixing truncation and line clamps

Your agent sees a component with text-overflow: ellipsis but no min-width: 0 on a flex child. The skill guides it to apply proper line-clamp techniques and adjust white-space and overflow to match the design.

Setting up a type scale for a design system

When building a new UI kit, the agent uses the skill to generate a modular scale (e.g., 1.25 ratio) with appropriate font-size, line-height, and letter-spacing for each level—from captions to display headings.

Reviewing heading hierarchy for accessibility

During a code review, the agent flags an <h3> that should be an <h2> based on visual prominence. It also checks for text-wrap: balance on headings and suggests text-box trimming to improve spacing.

Add it to your agent workflow

Install the skill with:

npx skills add boraoztunc/skills --skill better-typography

Then, in your agent prompt, say: "Review this component for typography issues using the better-typography skill." The agent will apply the skill's rules to your codebase and return concrete recommendations.

Compare before adopting

Before committing, compare this skill with other typography resources. Look at the quality of its guidance (does it cover variable fonts and OpenType?), how recently it's been updated, and whether it integrates cleanly with your agent's existing toolchain. Also consider if you need a broader design system skill or if this focused approach is enough.

Why it is worth tracking

With 289 stars and an active maintainer, better-typography is a credible addition to the agent-skill ecosystem. It fills a real gap—most agents ignore typography details that dramatically affect user experience. If you're building UI-heavy agents, this skill is worth evaluating now and monitoring as it evolves. For a deeper look, see the skill page on OpenAgentSkill.