Help us improve
Share bugs, ideas, or general feedback.
From source-design
Install, configure, and optimize fonts for a web project. Self-hosts WOFF2 files, generates @font-face declarations, configures Next.js/Tailwind, and sets up fallback metrics for zero-CLS loading. Handles premium fonts (Season Mix, GT Alpina) and free fonts (Satoshi, Instrument Serif, etc.).
npx claudepluginhub liamfuller07/source-design-pluginHow this skill is triggered — by the user, by Claude, or both
Slash command
/source-design:font-setupThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Install and configure fonts for production web projects with zero layout shift and optimal loading.
Guides font loading strategy decisions: font-display values, FOUT vs FOIT tradeoffs, variable fonts, subsetting, and system font stacks for performance.
Browses Google Fonts via browser automation to select typography pairings for frontend designs. Generates HTML imports, Tailwind configs, and curated fallbacks.
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.
Share bugs, ideas, or general feedback.
Install and configure fonts for production web projects with zero layout shift and optimal loading.
Read package.json, next.config.*, vite.config.*, astro.config.* to determine:
next/font/local or next/font/googleIf user specifies a Google Font:
# Option A: Fontsource (recommended)
npm install @fontsource-variable/[font-name]
# Import in entry: import '@fontsource-variable/[font-name]';
# Option B: Self-host WOFF2
mkdir -p public/fonts
# Download from fontsource API or Google Fonts Helper
If user specifies a premium font (Season Mix, GT Alpina, etc.):
If user says list:
Show curated anti-slop font recommendations categorized by:
If user says audit:
Scan the project for:
font-display property<link rel="preload"> for primary fontsOutput all files needed:
font-display, unicode-range--font-display, --font-body, --font-monofontFamily extensionnext/font setup or Fontsource imports<link rel="preload"> for primary font onlyascent-override, descent-override, size-adjust for zero CLSfont-display: swap for body, optional for displayFor the Season Collection (the premium anti-slop pairing):
/source-design:font-setup Season Mix
Generates:
public/fonts/season/"Season Mix", "Season Sans", system-ui, -apple-system, sans-serif at 62px/62pxseasonSans, "seasonSans Fallback", sans-serif at 15px/18pxfontFamily configlocalFont config