Claude Code vaporwave-ui-color-designer for portfolio themes

Define semantic colors for surface, text, accent, and interaction roles in both dark and light portfolio themes.

Install in Claude Code

Use Claude Code with the pages and component states to cover. Provide established brand colors or background constraints as exact values.

Review `.claude/skills/vaporwave-ui-color-design/SKILL.md` and its requirements at the pinned GitHub commit.
Create `.claude/skills/vaporwave-ui-color-design/` in your project and save the reviewed file as `.claude/skills/vaporwave-ui-color-design/SKILL.md`.
Start Claude Code from that project's root, then select `/vaporwave-ui-color-designer` in the slash menu or type the directory command `/vaporwave-ui-color-design`.

Example task

Palette palette-09 starts with dark background #111827, light background #F8FAFC, and brand accent #C084FC. Navigation text, body text, and focus need their own roles.

What to check

Return light and dark tokens with usage notes. Include {background: 'bg-primary', copy: 'text-primary', focus: 'focus'}. Reserve neon for accents and measure contrast for color pairings.

Original SKILL.md on GitHub · Updated 2026-11-14

Frequently asked question

Is a single neon palette enough for the portfolio?

Each theme needs backgrounds, text, accents, and state colors. Use the neon accent alongside specific roles for reading and keyboard interaction.