Help us improve
Share bugs, ideas, or general feedback.
From frontend-design-pro
Browses Google Fonts via browser automation to select typography pairings for frontend designs. Generates HTML imports, Tailwind configs, and curated fallbacks.
npx claudepluginhub davepoon/buildwithclaude --plugin frontend-design-proHow this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-design-pro:typography-selectorThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Browse, select, and apply typography for frontend designs.
Guides web typography with 2-3 font family limits, modular scales (Minor Third, Major Third, Perfect Fourth), line heights (1.4-1.6 body, 1.1-1.3 headings), and 45-75 character line lengths per Bringhurst rules.
Guides font pairing decisions using contrast principles, x-height matching, and family limits. Useful for selecting typeface combinations in design systems.
Provides brand typography selection and hierarchy development frameworks including the Brand-First Typography Selection Process, Modular Scale System, Font Classification Matrix, Serif vs. Sans-Serif Decision Framework, Typeface Evaluation Criteria, Font Pairing Principles, WCAG accessibility requirements, and typography design tokens. Auto-activates during brand typography development, font selection, type hierarchy creation, and typography system work. Use when discussing brand typography, font selection, font pairing, type hierarchy, modular scale, typography accessibility, WCAG typography, or typography guidelines.
Share bugs, ideas, or general feedback.
Browse, select, and apply typography for frontend designs.
This skill helps select the perfect fonts by:
tabs_context_mcp({ createIfEmpty: true })
tabs_create_mcp()
navigate({ url: "https://fonts.google.com/?sort=trending", tabId: tabId })
Take screenshots of trending fonts:
computer({ action: "screenshot", tabId: tabId })
Present to user: "Here are trending fonts. What style catches your eye?"
If user has a preference:
navigate({ url: "https://fonts.google.com/?query=Outfit", tabId: tabId })
computer({ action: "screenshot", tabId: tabId })
Click on a font to see all weights and styles:
computer({ action: "left_click", coordinate: [x, y], tabId: tabId })
computer({ action: "screenshot", tabId: tabId })
Get user's choice for:
Create Google Fonts import:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,700&display=swap" rel="stylesheet">
Create Tailwind font config:
tailwind.config = {
theme: {
extend: {
fontFamily: {
display: ['Fraunces', 'serif'],
body: ['Outfit', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
}
}
}
}
When browser tools are unavailable, use curated pairings.
references/font-pairing.md| Aesthetic | Recommended Pairing |
|---|---|
| Dark & Premium | Fraunces + Outfit |
| Minimal | Satoshi + Satoshi |
| Neobrutalism | Space Grotesk + Space Mono |
| Editorial | Instrument Serif + Inter |
| Y2K/Cyber | Orbitron + JetBrains Mono |
| Scandinavian | Plus Jakarta Sans + Plus Jakarta Sans |
| Corporate | Work Sans + Inter |
Contrast, not conflict:
Weight distribution:
Use a consistent type scale:
/* Minor Third (1.2) */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
--text-5xl: 3rem; /* 48px */
--text-6xl: 3.75rem; /* 60px */
--text-7xl: 4.5rem; /* 72px */
| Content Type | Line Height | Tailwind Class |
|---|---|---|
| Headlines | 1.1 - 1.2 | leading-tight |
| Subheads | 1.25 - 1.35 | leading-snug |
| Body text | 1.5 - 1.75 | leading-relaxed |
| Small text | 1.4 - 1.5 | leading-normal |
| Usage | Tracking | Tailwind Class |
|---|---|---|
| All caps | Wide | tracking-widest |
| Headlines | Tight to normal | tracking-tight |
| Body | Normal | tracking-normal |
| Small caps | Wide | tracking-wide |
Overused (instant "template" feeling):
Why these feel generic:
Provide selected typography in this format:
## Selected Typography
### Font Stack
| Role | Font | Weights | Fallback |
|------|------|---------|----------|
| Display | Fraunces | 400, 700 | serif |
| Body | Outfit | 400, 500, 600 | sans-serif |
| Mono | JetBrains Mono | 400 | monospace |
### Google Fonts Import
\`\`\`html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,700&family=Outfit:wght@400;500;600&family=JetBrains+Mono&display=swap" rel="stylesheet">
\`\`\`
### Tailwind Config
\`\`\`javascript
fontFamily: {
display: ['Fraunces', 'serif'],
body: ['Outfit', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
}
\`\`\`
### Usage Examples
\`\`\`html
<h1 class="font-display text-6xl font-bold leading-tight">
Headline
</h1>
<p class="font-body text-lg leading-relaxed">
Body text goes here.
</p>
<code class="font-mono text-sm">
code example
</code>
\`\`\`
See references/font-pairing.md for: