skills.rest
davepoon
davepoonCOMMUNITY
Explore all skills by this author →
Website𝕏@davepoonGitHub

color-curator

Browse Coolors palettes and generate Tailwind color configs for frontend designs.

3.4k|487|Updated Jul 25, 2025
Search Tags:#Tailwind#css variables# accessibility#hex codes#Color palette#Frontend design#coolors
One-click install
npx skills add https://github.com/davepoon/buildwithclaude --skill color-curator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-curator
Source: https://github.com/davepoon/buildwithclaude/tree/main/plugins/frontend-design-pro/skills/color-curator
Command: npx skills add https://github.com/davepoon/buildwithclaude --skill color-curator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Choosing a cohesive, accessible color palette for a frontend project is time-consuming, and manually translating visual palettes into Tailwind configs or CSS variables is error-prone.

Core Features & Use Cases

  • Browser-Based Palette Browsing: Navigate Coolors trending palettes via Chrome MCP tools, screenshot options, and extract hex codes from user-selected palettes.
  • Curated Fallback Palettes: Offer pre-built palettes organized by aesthetic (Dark & Premium, Clean & Minimal, Bold & Energetic, and more) when browser access is unavailable.
  • Config Generation: Map selected colors to design roles and output ready-to-use Tailwind configs or CSS variables with contrast-checked text colors.
  • Use Case: A developer building a dark-themed landing page asks for a premium palette; the skill presents trending Coolors options, extracts the five hex codes from the chosen palette, and outputs a complete Tailwind color config with background, surface, and text roles.

Quick Start

Ask the assistant to help you pick a color palette for your frontend project and generate the Tailwind config from it.

Frequently Asked Questions about color-curator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I pick a color palette for a website design?▼

Browse trending palettes on Coolors through the browser workflow, screenshot options, and select one to extract its hex codes. If browser access is unavailable, choose from curated fallback palettes organized by aesthetic mood.

How to convert a color palette into a Tailwind config?▼

Map the palette's hex codes to design roles such as primary, background, surface, and text colors, then output them as a Tailwind theme.extend.colors object. The skill generates this config automatically after palette selection.

Does the color palette workflow work without browser access?▼

Yes, a fallback mode provides curated palettes from the color theory reference, organized by aesthetics like Dark & Premium or Clean & Minimal. Users can also supply hex codes or color descriptions directly.

What contrast ratio is required for accessible text colors?▼

Normal text requires a 4.5:1 contrast ratio against its background, while large text and UI components require 3:1. The reference lists safe text colors for both white and black backgrounds meeting these minimums.

What is the 60-30-10 rule in color palette design?▼

The 60-30-10 rule allocates 60% of the design to a dominant background color, 30% to a secondary color for containers and sections, and 10% to an accent color for CTAs and highlights.

Related Skills

Explore More Design & Creative Skills→
akhilksap2026akhilksap2026

branding-generator

Generate brand identity kits with color palettes, typography, logos, and guidelines.

Community
Intermediate
ultramaxoAIultramaxoAI

frontend-design

Design React/Next.js interfaces with Tailwind styling and responsive layouts.

Official
Intermediate
dembrandtdembrandt
33

brand-visual-language

Define cohesive border-radius, typography, and iconography systems for brand consistency.

Official
Intermediate
MoxyWolfLLCMoxyWolfLLC

color-palette-extractor

Extract dominant colors and generate design-ready palettes from images and URLs.

Official
Advanced