词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航

Claude Code type-scale skill for typography ratios and CSS tokens

Calculate sizes from a base and a ratio. Output pixels, rem units, CSS variables, suggested elements, and line heights.

中文

Install in Claude Code

A local Claude Code project. Provide the body base size, scale ratio, and interface type.

  1. Review `.claude/skills/type-scale/SKILL.md` and its requirements at the pinned GitHub commit.
  2. Create `.claude/skills/type-scale/` in your project and save the reviewed file as `.claude/skills/type-scale/SKILL.md`.
  3. Start Claude Code from that project's root, then select `/type-scale` in the slash menu.

Example task

Invoke /type-scale in Claude Code and calculate a scale for this fictional dashboard.
interface `museum dashboard` | base `16px` | ratio `1.250` | root size `16px`
output requires `CSS custom properties`, rem values, and element suggestions

What to check

Keep `16px` for body text, then `20px` and `25px` for the next headings. With a `16px` root these map to `1.25rem` and `1.5625rem`. Output `CSS custom properties`.

Original SKILL.md on GitHub · Updated

Frequently asked question

How do I pick a scale for a dense interface?

Ratios control the gap between steps. Use a smaller gap for dense data while keeping headings above the base size.

Related skills from this repository