Browse and select color palettes from Coolors or curated fallbacks. Use to find the perfect color palette for a design project.
/plugin marketplace add davepoon/buildwithclaude/plugin install frontend-design-pro@buildwithclaudeThis skill is limited to using the following tools:
references/color-theory.mdBrowse, 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:
Use when working with Payload CMS projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Use when debugging validation errors, security issues, relationship queries, transactions, or hook behavior.