OpenSkillIndex← back to search
claude-codeother

Claude-skill-registry color-tokens

Generate accessible color tokens from a single accent color. Use when user wants to create or update color palettes, check accessibility contrast, or generate warm/cool adaptive gray scales.

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/color-tokens" ~/.claude/skills/majiayu000-claude-skill-registry-color-tokens && rm -rf "$T"
manifest: skills/data/color-tokens/SKILL.md
tags
#color-palettes#accessibility#css-tokens#design-systems#contrast-check
source content

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

node .claude/skills/color-tokens/generate.js "#ed8008"