skills/smithery.ai/color-tokens

color-tokens

Installation
SKILL.md

Generate Color Tokens

Generate accessible color tokens from a single accent color following Dieter Rams' "Less, but better" philosophy.

Usage

  1. Ask user for the accent color (hex format, e.g., #ed8008)
  2. Run: node .claude/skills/color-tokens/generate.js "#hexcolor"
  3. Review output with user
  4. Update src/styles/tokens.css with new values

What It Generates

  • 10 adaptive grays that harmonize with the accent (warm/cool/neutral)
  • Accessible text color for the accent (light or dark based on APCA contrast)
  • CSS custom properties ready to paste
  • Accessibility contrast checks

Example

Installs
1
First Seen
Apr 1, 2026
color-tokens from smithery.ai