Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, and Tailwind v4 CSS output. Includes WCAG contrast checking. Use when setting up design systems, creating Tailwind themes, building brand colours from a hex value, or checking colour accessibility.
Generates complete accessible color palettes with Tailwind CSS and WCAG checks from a single hex value.
npx claudepluginhub jezweb/claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
assets/tailwind-colors.cssreferences/contrast-checking.mdreferences/dark-mode-palette.mdreferences/semantic-mapping.mdreferences/shade-generation.mdGenerate a complete, accessible colour system from a single brand hex. Produces Tailwind v4 CSS ready to paste into your project.
Ask for the primary brand colour. A single hex like #0D9488 is enough.
Convert hex to HSL, then generate shades by varying lightness while keeping hue constant:
| Shade | Lightness | Use Case |
|---|---|---|
| 50 | 97% | Subtle backgrounds |
| 100 | 94% | Hover states |
| 200 | 87% | Borders, dividers |
| 300 | 75% | Disabled states |
| 400 | 62% | Placeholder text |
| 500 | 48% | Brand colour |
| 600 | 40% | Primary actions |
| 700 | 33% | Hover on primary |
| 800 | 27% | Active states |
| 900 | 20% | Text on light bg |
| 950 | 10% | Darkest accents |
See references/shade-generation.md for the conversion formula.
Light mode:
--background: white;
--foreground: primary-950;
--card: white;
--card-foreground: primary-900;
--primary: primary-600;
--primary-foreground: white;
--muted: primary-50;
--muted-foreground: primary-600;
--border: primary-200;
Dark mode — invert lightness while preserving relationships:
--background: primary-950;
--foreground: primary-50;
--card: primary-900;
--card-foreground: primary-50;
--primary: primary-500;
--primary-foreground: white;
--muted: primary-800;
--muted-foreground: primary-400;
--border: primary-800;
WCAG minimum ratios:
Quick check: primary-600 on white and white on primary-600. See references/contrast-checking.md for formula.
@theme {
--color-primary-50: #F0FDFA;
--color-primary-100: #CCFBF1;
--color-primary-500: #14B8A6;
--color-primary-950: #042F2E;
--color-background: #FFFFFF;
--color-foreground: var(--color-primary-950);
--color-primary: var(--color-primary-600);
--color-primary-foreground: #FFFFFF;
}
.dark {
--color-background: var(--color-primary-950);
--color-foreground: var(--color-primary-50);
--color-primary: var(--color-primary-500);
}
Copy assets/tailwind-colors.css as a starting template.
| File | Purpose |
|---|---|
references/shade-generation.md | Hex to HSL conversion, lightness values |
references/semantic-mapping.md | Token mapping for light/dark modes |
references/dark-mode-palette.md | Inversion patterns |
references/contrast-checking.md | WCAG formulas, quick check table |
assets/tailwind-colors.css | Complete CSS output template |
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.