Can I use this skill without browser access?

Yes, it includes a robust Fallback Mode with expert-curated font pairings for various aesthetics like 'Minimal', 'Editorial', or 'Corporate' when tools are unavailable.

Does it support Tailwind CSS integration?

Absolutely. Once a font stack is chosen, it generates the exact JSON configuration needed for your tailwind.config.js file.

How does the Typography Selector browse fonts?

The skill uses browser automation to navigate Google Fonts directly, allowing Claude to capture screenshots of trending fonts and present them to the user for selection.

Why does the skill suggest avoiding fonts like Inter or Roboto?

To help your project stand out. The skill prioritizes distinctive pairings that avoid the 'generic template' look common in AI-generated or default-heavy designs.

Typography Selector

Name: Typography Selector
Author: davepoon

bydavepoon

•

2,257

•

디자인 도구

Selects and implements professional font pairings for frontend projects using real-time Google Fonts browsing and expert design patterns.

The Typography Selector skill empowers Claude to act as a professional UI designer by browsing live Google Fonts, suggesting curated pairings based on specific aesthetics—such as Minimal, Editorial, or Neobrutalism—and instantly generating implementation code. It streamlines the design-to-code workflow by providing ready-to-use Google Font imports and Tailwind CSS configurations, ensuring your projects have high-quality typography that avoids a generic appearance while maintaining optimal readability and performance.

주요 기능

01Curated font pairings for specific design aesthetics like Dark & Premium and Y2K

02Built-in typography best practices for line height, spacing, and font weights

03Real-time Google Fonts browsing and screenshot analysis via browser automation

042,257 GitHub stars

05Automatic generation of Google Fonts HTML <link> import snippets

06Instant Tailwind CSS font family configuration mapping

사용 사례

01Rapidly prototyping themed UI designs with consistent type scales and weights

02Designing a high-conversion landing page with unique, non-generic typography

03Modernizing an existing project by replacing default fonts with professional pairings

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add davepoon/buildwithclaude typography-selector

For use in Claude.ai and ChatGPT

Download Skill