ryanthedev

Fonts — Development skill for Claude Code

Development community

description: Select, pair, and configure typography with theory backing Run the design-for-ai skill focused on typography decisions.

How to install Fonts

Installs to ~/.claude/skills/ryanthedev-design-for-ai-fonts/SKILL.md

Terminal
mkdir -p ~/.claude/skills/ryanthedev-design-for-ai-fonts && curl -fsSL https://raw.githubusercontent.com/ryanthedev/design-for-ai/HEAD/commands/fonts.md -o ~/.claude/skills/ryanthedev-design-for-ai-fonts/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What Fonts does


description: Select, pair, and configure typography with theory backing

Run the design-for-ai skill focused on typography decisions.

  1. Read references/chapter-03-typography.md and references/appendix-fonts-and-typography.md.
  2. Use the "I Need to Pick Fonts" decision tree from references/checklists.md.
  3. Walk through:
    • Medium: Screen or print? What resolution/devices?
    • Body font: Select based on medium-form relationship (Ch 3)
    • The "n" test: Identify letter st

Alternatives in Development

  • 8 — Build a full-screen automotive hero section for a car dealership/marketplace website 152 ★
  • Specimen And Signal — Copy-ready prompts, fonts and recipes for dark scientific-instrument motion graphics, plus 20 verified Claude 3 ★
  • Brand Check — Verify a page or component against the repo's brand reference document — colors, fonts, logo usage, voice

Full documentation available on GitHub

View Source Repository