typography

name

typography

description

Generate a type scale token file (CSS variables, tailwind config, or JS module) anchored on the type ratio detected by /scan. Use when the user wants to formalize their typography system, extract a scale from existing code, or scaffold typography tokens. Defaults to dry-run preview; pass --apply to write. Auto-picks format based on stack: tailwind for tailwind projects, JS module for JS-heavy stacks, CSS variables otherwise. Run as `node ~/.claude/skills/dragoon/skills/typography/scripts/typography.js`.

/typography

Generates a 9-step type scale (xs / sm / base / md / lg / xl / 2xl / 3xl / 4xl) anchored on 16px, using the ratio detected by /scan (or a sensible default if none was found).

When to use

• The user wants to formalize their typography system
• The user asks for a "type scale", "font tokens", or "type tokens"
• After /scan detects a type ratio, to extract it as reusable tokens

Output

One file per run. Format chosen automatically from the stack, override with --format:

• css → :root { --font-size-xs: ... }
• tailwind → module.exports = { theme: { extend: { fontSize: { ... } } } }
• js → export const fontSize = { xs: '...', ... }

Default dir: src/styles/. Override with --dir.

Run it

dragoon typography                           # preview
dragoon typography --apply                   # write
dragoon typography --format js --apply
dragoon typography --dir src/tokens --apply