Help us improve
Share bugs, ideas, or general feedback.
From frontend-design-pro
Browses Coolors for trending color palettes, screenshots for user selection, extracts hex codes, maps to Tailwind config with bg/text styles. Fallback curated palettes for design projects.
npx claudepluginhub davepoon/buildwithclaude --plugin frontend-design-proHow this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-design-pro:color-curatorThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Browse, select, and apply color palettes for frontend designs.
Generates color palettes with Tailwind-scale shades (50–950) from hex inputs using OKLCH color space. Supports color wheel strategies (triadic, complementary, etc.) and mood flags (vibrant, pastel).
Generates harmonious 8-12 color palettes from text descriptions, moods, images, brands, or starting colors. Outputs self-contained HTML with swatches, hex/RGB/HSL codes, contrast ratios, and pairings.
Generates accessible color palettes from brand hex: 11-shade scales (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS, WCAG contrast checks. For design systems and themes.
Share bugs, ideas, or general feedback.
Browse, select, and apply color palettes for frontend designs.
This skill helps select the perfect color palette by:
tabs_context_mcp({ createIfEmpty: true })
tabs_create_mcp()
navigate({ url: "https://coolors.co/palettes/trending", tabId: tabId })
Take screenshots of trending palettes:
computer({ action: "screenshot", tabId: tabId })
Present to user: "Here are the trending palettes. Which one catches your eye?"
If user wants more options:
computer({ action: "scroll", scroll_direction: "down", tabId: tabId })
computer({ action: "screenshot", tabId: tabId })
When user chooses a palette, click to view details:
computer({ action: "left_click", coordinate: [x, y], tabId: tabId })
From the palette detail view, extract:
Based on user's background style preference:
| Background Style | Mapping |
|---|---|
| Pure white | bg: #ffffff, text: darkest color |
| Off-white/warm | bg: #faf8f5, text: darkest |
| Light tinted | bg: lightest from palette, text: darkest |
| Dark/moody | bg: darkest from palette, text: white/#fafafa |
Create Tailwind color config:
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#[main-color]',
secondary: '#[supporting-color]',
accent: '#[pop-color]',
background: '#[bg-color]',
surface: '#[card-color]',
text: {
primary: '#[heading-color]',
secondary: '#[body-color]',
muted: '#[muted-color]'
}
}
}
}
}
When browser tools are unavailable, use curated palettes.
references/color-theory.mdAsk the user:
"Without browser access, I can suggest palettes based on your aesthetic. Which mood fits best?"
Users can also provide:
Always verify:
| Role | Usage | Count |
|---|---|---|
| Primary | Brand, CTAs, links | 1 |
| Secondary | Hover, icons, supporting | 1-2 |
| Background | Page background | 1 |
| Surface | Cards, modals, inputs | 1 |
| Border | Dividers, outlines | 1 |
| Text Primary | Headings, important text | 1 |
| Text Secondary | Body, descriptions | 1 |
| Text Muted | Captions, placeholders | 1 |
Provide the selected palette in this format:
## Selected Color Palette
### Colors
| Role | Hex | Preview | Usage |
|------|-----|---------|-------|
| Primary | #ff6b35 | 🟧 | CTAs, links, accents |
| Background | #0a0a0a | ⬛ | Page background |
| Surface | #1a1a1a | ⬛ | Cards, modals |
| Text Primary | #ffffff | ⬜ | Headings, buttons |
| Text Secondary | #a3a3a3 | ⬜ | Body text, descriptions |
| Border | #2a2a2a | ⬛ | Dividers, outlines |
### Tailwind Config
\`\`\`javascript
colors: {
primary: '#ff6b35',
background: '#0a0a0a',
surface: '#1a1a1a',
text: {
primary: '#ffffff',
secondary: '#a3a3a3',
},
border: '#2a2a2a',
}
\`\`\`
### CSS Variables (Alternative)
\`\`\`css
:root {
--color-primary: #ff6b35;
--color-background: #0a0a0a;
--color-surface: #1a1a1a;
--color-text-primary: #ffffff;
--color-text-secondary: #a3a3a3;
--color-border: #2a2a2a;
}
\`\`\`
See references/color-theory.md for: