Meta Agent Tools
PT

Back to the catalog

better-typography

Focuses on type scale, spacing, sizing, variable fonts, OpenType features, wrapping, truncation and other details that make typography feel

Open source Repository Open in the app JSON README (API)

About

Focuses on type scale, spacing, sizing, variable fonts, OpenType features, wrapping, truncation and other details that make typography feel great across your product.

Details

Kind
Agent skills
Topic
No topic detected
Publisher
jakubkrehel
Origin
skillssh
Category
ferramentas
Stars
6,048
Forks
212
Open pull requests
3
Last push
2026-08-29T17:01:49Z
Repository state
ativo
Language
Markdown
License
MIT
Added
2026-08-30 15:21:15
Updated
2026-09-10 04:02:56
Origin id
jakubkrehel/skills/better-typography

README

<a href="https://interfaces.dev/">
  <img width="320" height="168" alt="interfaces.dev" src="https://ho1jr3x2dcwdu3t5.public.blob.vercel-storage.com/interfaces-og-image.png" />
</a>

[![skills.sh](https://skills.sh/b/jakubkrehel/skills)](https://skills.sh/jakubkrehel/skills)

A collection of agent skills that cover UI, typography, colors, accessibility, layout, product writing and help you build a great interface.

These skills are contain topics that I write about on [my personal website](https://jakub.kr/) and my design engineering magazine, [Interfaces](https://interfaces.dev/).

## Skills that help build great interfaces

- [**better-interface**](skills/better-interface/SKILL.md): Combines all of the `better-*` skills into a single review.
- [**better-ui**](skills/better-ui/SKILL.md): Improves UI in your project across the board. Covers things like **concentric border radius**, **optical alignment**, **contextual icons**, **hit areas**, **animation** and more.
- [**better-typography**](skills/better-typography/SKILL.md): Improves type in your project. Covers **type scale**, **spacing**, **sizing**, **variable fonts**, **OpenType features**, **wrapping**, **truncation** and more.
- [**better-colors**](skills/better-colors/SKILL.md): Helps you build a color system and answer anything about color in your project. You can **generate palettes**, **use semantic tokens**, **convert between formats**, **check contrast** and more.
- [**better-accessibility**](skills/better-accessibility/SKILL.md): Helps your project comply with accessibility standards and best practices.
- [**better-layout**](skills/better-layout/SKILL.md): Helps with **grouping**, **alignment**, **reading order** and other details that make a great layout.
- [**better-writing**](skills/better-writing/SKILL.md): Focuses on improving and product copy in your project and making it consistent.
- [**interface-review**](skills/interface-review/SKILL.md): Reviews your work across multiple categories like **UI**, **typography**, **layout**, **color**, **writing** and **accessibility** and gives you a detailed analysis of the findings. User-invoked.
- [**explain-interface**](skills/explain-interface/SKILL.md): Helps you figure out how an animation, design or a piece of UI was built on the web. User-invoked.
- [**break**](skills/break/SKILL.md): Renders a component you choose in **every state and scenario** on a temporary page and stress tests it. User-invoked.
- [**variant**](skills/variant/SKILL.md): Builds multiple **variants** of a component you're working on and helps you iterate. User-invoked.

## Install

```bash
npx skills add jakubkrehel/skills
```

## Claude Code plugin

```text
/plugin marketplace add jakubkrehel/skills
/plugin install interfaces@interfaces
```

More