Stats
Actions
Tags
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.
How 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.
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,[email protected],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,[email protected],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:
npx claudepluginhub davepoon/buildwithclaude --plugin frontend-design-proGuides 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.