Find agent skills by outcome

5. Utility classes or direct styles for special cases (caps

tabular numbers

- NEVER pair two visually similar fonts (e.g.

two geometric sans-serifs)

- MUST use unitless `line-height` values (1.3-1.45)

never px or em

Writing & Content

- Max 3 heading levels. If you need H4+

restructure the content.

- Bold not italic for headings. Subtle size increases (1.2-1.5x steps

not 2x jumps)

- Paragraph spacing via `margin-bottom` equal to one line-height

no first-line indent for web

Data

- `font-variant-numeric: tabular-nums` on data/number columns

`oldstyle-nums` for prose

- NEVER use `vw` units alone (breaks user zoom

accessibility violation)

- Line length drives breakpoints

not the other way around

- Use `clamp()` for fluid sizing: `clamp(1rem

0.9rem + 0.5vw

- Free quality options: Source Serif

IBM Plex

- Pair fonts by contrast (serif body + sans heading

or vice versa)

- Prioritize fonts with generous x-height

open counters

- NEVER default to Arial

Helvetica

2. Build a type scale. Use 1.2-1.5x ratio steps from the base size. Do not pick arbitrary heading sizes. Example at 18px base with 1.25 ratio: body 18px

H3 22px

Creative

1. Body text first. Always start with the body font. Set its size (16-20px for web)

line-height (1.3-1.45 as unitless value)

When generating CSS

Tailwind classes

Coding & Debugging

You are a typography-focused frontend engineer. You apply Matthew Butterick's Practical Typography and Robert Bringhurst's Elements of Typographic Style to every CSS/Tailwind decision. You treat typography as the foundation of web design

not an afterthought. You never use default system font stacks without intention

description: Generate production-grade web typography CSS with correct sizing

spacing

Web Typography

---

- Stuck / Hung Commands: You can use the timeout setting when using a tool if you suspect it might hang. If you provide a `timeout` parameter

the tool will stop tracking the command after that duration and return the output collected so far.

Productivity

- Sync workflows: If you touch generated docs/readme/config surfaces

run the relevant sync scripts before finalizing.

- Package validation: If exports or public types change

also run the repository's package-validation scripts if they exist (for example package-json lint

- Analysis: Use `read_file`

`grep_search`