Color Palette
Drop a complete Tailwind v4 color system into a solo builder’s app without hand-rolling shades and semantic tokens.
Overview
Color Palette is an agent skill for the Build phase that supplies a Tailwind v4 @theme color template with an 11-shade primary scale and light/dark semantic tokens.
Install
npx skills add https://github.com/jezweb/claude-skills --skill color-paletteWhat is this skill?
- Tailwind v4 @theme block with import tailwindcss pattern
- 11-shade primary scale (50–950) ready to swap for your brand baseline
- Light-mode semantic tokens: background, foreground, card, popover
- Dark-mode overrides paired with the same semantic token names
- Destructive (error) color slot alongside primary scale
- 11-shade primary scale (50-950)
- Light and dark semantic token sets
Adoption & trust: 2.2k installs on skills.sh; 841 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You picked a brand color but lack a consistent shade scale and semantic CSS variables for components and dark mode.
Who is it for?
Indie builders standardizing Tailwind v4 theming on a new or refactored React/Vite/Next UI.
Skip if: Teams that already use a mature design-token pipeline (Style Dictionary, Figma sync) with no Tailwind migration planned.
When should I use this skill?
Starting or refactoring a Tailwind v4 frontend and you need a full primary scale plus semantic background/foreground/card tokens.
What do I get? / Deliverables
You get a paste-ready @theme file with primary 50–950 and semantic tokens your frontend can adopt in one pass.
- @theme CSS block with primary scale
- Semantic light/dark color variables
- Destructive color token
Recommended Skills
Journey fit
How it compares
Use as a structured theme starter instead of asking the agent to invent random hex values per component.
Common Questions / FAQ
Who is color-palette for?
Solo and indie frontend builders using Tailwind v4 who want shadcn-like semantic colors without designing scales manually.
When should I use color-palette?
During Build (frontend) when scaffolding a new app shell, migrating to Tailwind v4 @theme, or adding dark mode tokens before shipping UI.
Is color-palette safe to install?
It is a static CSS template with no runtime code; review the Security Audits panel on this Prism page before installing from any third-party skills repo.
SKILL.md
READMESKILL.md - Color Palette
/** * Complete Color Palette Template * Tailwind v4 @theme syntax * * Replace PRIMARY_* values with your generated shade scale. * This template includes: * - 11-shade primary scale (50-950) * - Semantic tokens for light mode * - Dark mode overrides * - Destructive (error) color */ @import "tailwindcss"; @theme { /* ======================================== PRIMARY COLOR SCALE Replace these with your generated shades ======================================== */ --color-primary-50: #F0FDFA; /* Lightest - 97% */ --color-primary-100: #CCFBF1; /* 94% */ --color-primary-200: #99F6E4; /* 87% */ --color-primary-300: #5EEAD4; /* 75% */ --color-primary-400: #2DD4BF; /* 62% */ --color-primary-500: #14B8A6; /* 48% - Brand baseline */ --color-primary-600: #0D9488; /* 40% - Brand color (light mode primary) */ --color-primary-700: #0F766E; /* 33% */ --color-primary-800: #115E59; /* 27% */ --color-primary-900: #134E4A; /* 20% */ --color-primary-950: #042F2E; /* Darkest - 10% */ /* ======================================== LIGHT MODE SEMANTIC TOKENS ======================================== */ /* Page/App Background & Text */ --color-background: #FFFFFF; --color-foreground: var(--color-primary-950); /* Cards & Elevated Surfaces */ --color-card: #FFFFFF; --color-card-foreground: var(--color-primary-900); /* Popovers, Tooltips, Dropdowns */ --color-popover: #FFFFFF; --color-popover-foreground: var(--color-primary-950); /* Primary Actions (Buttons, Links, CTAs) */ --color-primary: var(--color-primary-600); --color-primary-foreground: #FFFFFF; /* Secondary Actions (Less Prominent) */ --color-secondary: var(--color-primary-100); --color-secondary-foreground: var(--color-primary-900); /* Muted/Subtle Content */ --color-muted: var(--color-primary-50); --color-muted-foreground: var(--color-primary-600); /* Accent/Highlight Areas */ --color-accent: var(--color-primary-100); --color-accent-foreground: var(--color-primary-900); /* Destructive Actions (Delete, Error) */ --color-destructive: #DC2626; /* red-600 */ --color-destructive-foreground: #FFFFFF; /* Borders, Dividers, Input Borders */ --color-border: var(--color-primary-200); --color-input: var(--color-primary-200); /* Focus Rings (Keyboard Navigation) */ --color-ring: var(--color-primary-600); /* Border Radius (Optional) */ --radius: 0.5rem; } /* ======================================== DARK MODE OVERRIDES ======================================== */ .dark { /* Page/App Background & Text */ --color-background: var(--color-primary-950); --color-foreground: var(--color-primary-50); /* Cards & Elevated Surfaces */ --color-card: var(--color-primary-900); --color-card-foreground: var(--color-primary-50); /* Popovers, Tooltips, Dropdowns */ --color-popover: var(--color-primary-900); --color-popover-foreground: var(--color-primary-50); /* Primary Actions (Brighter for Visibility) */ --color-primary: var(--color-primary-500); --color-primary-foreground: #FFFFFF; /* Secondary Actions */ --color-secondary: var(--color-primary-800); --color-secondary-foreground: var(--color-primary-50); /* Muted/Subtle Content */ --color-muted: var(--color-primary-800); --color-muted-foreground: var(--color-primary-400); /* Accent/Highlight Areas */ --color-accent: var(--color-primary-800); --color-accent-foreground: var(--color-primary-50); /* Destructive Actions (Brighter) */ --color-destructive: #EF4444; /* red-500 */ --color-destructive-foreground: #FFFFFF; /* Borders, Dividers, Input Borders */ --color-border: var(--color-primary-800); --color-input: var(--color-primary-800); /* Focus Rings */ --color-ring: var(--color-primary-500); } /* ======================================== USAGE EXAMPLES ======================================== */ /* // Primary Button <button className="bg-primary text-pri