typography-selector

# Typography Selector Browse, select, and apply typography for frontend designs. ## Purpose This skill helps select the perfect fonts by: - Browsing trending fonts on Google Fonts - Suggesting pairings based on aesthetic - Generating Google Fonts imports - Mapping to Tailwind config - Providing curated fallbacks when browser unavailable ## Browser Workflow ### Step 1: Navigate to Google Fonts ```javascript tabs_context_mcp({ createIfEmpty: true }) tabs_create_mcp() navigate({ url: "https://fonts.google.com/?sort=trending", tabId: tabId }) ``` ### Step 2: Browse Fonts Take screenshots of trending fonts: ```javascript computer({ action: "screenshot", tabId: tabId }) ``` Present to user: "Here are trending fonts. What style catches your eye?" ### Step 3: Search Specific Fonts If user has a preference: ```javascript navigate({ url: "https://fonts.google.com/?query=Outfit", tabId: tabId }) computer({ action: "screenshot", tabId: tabId }) ``` ### Step 4: View Font Details Click on a font to see all weights and styles: ```javascript computer({ action: "left_click", coordinate: [x, y], tabId: tabId }) computer({ action: "screenshot", tabId: tabId }) ``` ### Step 5: Select Fonts Get user's choice for: - **Display/Heading font**: For headlines, hero text - **Body font**: For paragraphs, readable text - **Mono font** (optional): For code, technical content ### Step 6: Generate Import Create Google Fonts import: ```html <link rel="preconnect" href="https://fonts.goog...