Skip to main content
skill CX Codex

font-pairing-suggester — Claude Code skill: font pairs and hierarchy

Suggests font combinations for a given use case and shows heading hierarchy with examples. Handy when you need a free stand-in for a paid typeface.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add OneWave-AI/claude-skills --skill font-pairing-suggester -a claude-code
Open on GitHub

What font-pairing-suggester does

The skill turns the agent into a typography helper. Describe the job — landing page, docs, deck — and you get a pair that works together by style and weight. It also maps paid typefaces to free Google Fonts alternatives.

Inside is an instruction block for the agent plus an output template: results first, then recommendations and next steps. Hierarchy comes with examples, so you can see how a heading, subheading and body text sit together. The format is ready to paste into a mockup or CSS.

It answers a specific request rather than auditing a whole project, so without your description it has nothing to pair for. Worth installing if you pick fonts often and are tired of hunting for alternatives by hand. The install runs through npx, so Node.js has to be on the machine.

What it helps with

  • pick a heading and body font pair for a landing page
  • swap a paid typeface for a free Google Fonts alternative
  • show heading and body hierarchy with a worked example
  • get a copy-paste block of typography recommendations
  • explain why two typefaces work together

Example prompts for the agent

  • Suggest a font pair for a SaaS landing page: headings and body text
  • What can replace a paid typeface like Helvetica? I need a Google Fonts option
  • Show the hierarchy for a travel blog: h1, h2 and a paragraph

How to install font-pairing-suggester

1Skills CLI (Vercel)

npx skills add OneWave-AI/claude-skills --skill font-pairing-suggester -a claude-code

2Manually: put the files in place

~/.claude/skills/font-pairing-suggester/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/font-pairing-suggester/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about font-pairing-suggester

How do I install font-pairing-suggester in Claude?

Run npx skills add OneWave-AI/claude-skills --skill font-pairing-suggester -a claude-code. The skill lands at ~/.claude/skills/font-pairing-suggester/SKILL.md.

What does font-pairing-suggester do?

It recommends font combinations for a use case, offers free Google Fonts alternatives to paid typefaces, and shows hierarchy with examples.

Which platforms support the skill?

Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode. Each platform has its own install command and puts the skill file in its own skills folder.

Source text

SKILL.md · MIT
---
name: font-pairing-suggester
description: Recommend font combinations for different use cases. Provide Google Fonts alternatives to premium fonts with hierarchy examples.
---

# Font Pairing Suggester
Recommend font combinations for different use cases. Provide Google Fonts alternatives to premium fonts with hierarchy examples.

## Instructions

You are an expert at typography and font pairing. Suggest harmonious font combinations, provide alternatives, and show hierarchy examples.

### Output Format

```markdown
# Font Pairing Suggester Output

**Generated**: {timestamp}

---

## Results

[Your formatted output here]

---

## Recommendations

[Actionable next steps]

```

### Best Practices

1. **Be Specific**: Focus on concrete, actionable outputs
2. **Use Templates**: Provide copy-paste ready formats
3. **Include Examples**: Show real-world usage
4. **Add Context**: Explain why recommendations matter
5. **Stay Current**: Use latest best practices for design

### Common Use Cases

**Trigger Phrases**:
- "Help me with [use case]"
- "Generate [output type]"
- "Create [deliverable]"

**Example Request**:
> "[Sample user request here]"

**Response Approach**:
1. Understand user's context and goals
2. Generate comprehensive output
3. Provide actionable recommendations
4. Include examples and templates
5. Suggest next steps

Remember: Focus on delivering value quickly and clearly!

© OneWave-AI · MIT · OneWave-AI/claude-skills

Similar skills

Everything for Design →

From the same set58

workout-program-designer Designs custom workout programs for strength, cardio, and flexibility goals. It schedules progressive overload, deload weeks, and adapts exercises for home or gym setups. CX Codex +1 664installs color-palette-extractor Pulls dominant colors out of an image, screenshot or website and turns them into a palette with contrast checks. Handy when you need a theme built from a logo or someone else's mockup. CX Codex +1 609installs stock-photo-finder A skill for searching multiple free stock photo sites at once with license, orientation, and palette filters. Useful when sourcing images for UI layouts and articles. CX Codex +1 582installs itinerary-optimizer Builds a day-by-day route for trips with several stops: transfers, reservation windows and slack for whatever comes up. Useful when the plan is packed too tight. CX Codex +1 580installs presentation-design-enhancer Turns text-heavy slides into visual storytelling, suggesting layout changes, icons and ways to show data. CX Codex +1 573installs competitor-price-tracker A skill that watches competitor pricing pages, flags price changes and maps discount cycles. Useful when you check rival prices by hand and keep missing moves. CX Codex +1 459installs budget-optimizer A skill that reads your spending, finds where money leaks, and builds a plan around the 50/30/20 rule, subscriptions and debt payoff. CX Codex +1 429installs skill-navigator Matches a described goal to skills in the library and suggests combinations. Use it when you need to decide which tool to run first. CX Codex +1 413installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor