color-curator

# Color Curator Browse, select, and apply color palettes for frontend designs. ## Purpose This skill helps select the perfect color palette by: - Browsing trending palettes on Coolors - Presenting options to the user - Extracting hex codes - Mapping to Tailwind config - Providing curated fallbacks when browser unavailable ## Browser Workflow ### Step 1: Navigate to Coolors ```javascript tabs_context_mcp({ createIfEmpty: true }) tabs_create_mcp() navigate({ url: "https://coolors.co/palettes/trending", tabId: tabId }) ``` ### Step 2: Screenshot Palettes Take screenshots of trending palettes: ```javascript computer({ action: "screenshot", tabId: tabId }) ``` Present to user: "Here are the trending palettes. Which one catches your eye?" ### Step 3: Browse More If user wants more options: ```javascript computer({ action: "scroll", scroll_direction: "down", tabId: tabId }) computer({ action: "screenshot", tabId: tabId }) ``` ### Step 4: Select Palette When user chooses a palette, click to view details: ```javascript computer({ action: "left_click", coordinate: [x, y], tabId: tabId }) ``` ### Step 5: Extract Colors From the palette detail view, extract: - All 5 hex codes - Color names if available - Relative positions (light to dark) ### Step 6: Map to Design Based on user's background style preference: | Background Style | Mapping | |-----------------|---------| | Pure white | `bg: #ffffff`, text: darkest color | | Off-white/warm | `bg: #faf8f5`, text: darkest ...