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-proThis skill is limited to using the following tools:
Browse, select, and apply typography for frontend designs.
Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.
Builds scalable data pipelines, modern data warehouses, and real-time streaming architectures using Spark, dbt, Airflow, Kafka, and cloud platforms like Snowflake, BigQuery.
Builds production Apache Airflow DAGs with best practices for operators, sensors, testing, and deployment. For data pipelines, workflow orchestration, and batch job scheduling.
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: