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-proThis skill is limited to using the following tools:
Browse, select, and apply color palettes for frontend designs.
Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.
Builds scalable data pipelines, modern data warehouses, and real-time streaming architectures using Spark, dbt, Airflow, Kafka, and cloud platforms like Snowflake, BigQuery.
Builds production Apache Airflow DAGs with best practices for operators, sensors, testing, and deployment. For data pipelines, workflow orchestration, and batch job scheduling.
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: