OpenSkillIndex← back to search
claude-code

Ui-ux-suite theme-builder

Build light/dark theme from scratch or improve existing. Complete surface, text, and interactive color system

install
source · Clone the upstream repo
git clone https://github.com/Aboudjem/ui-ux-suite
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/Aboudjem/ui-ux-suite "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/theme-builder" ~/.claude/skills/aboudjem-ui-ux-suite-theme-builder && rm -rf "$T"
manifest: skills/theme-builder/SKILL.md
source content

/theme-builder: Build or Improve Theme

Build a complete light + dark theme from a brand color, or improve an existing theme.

Flow

  1. Determine brand color and style direction
  2. Generate palette with 
    uiux_generate_palette
    :
    • Brand: primary, primary-foreground
    • Neutral: 11-step scale from lightest to darkest
    • Semantic: success, error, warning, info (each with base, light, dark)
    • Surfaces: background, surface, elevated, overlay
    • Text: primary, secondary, muted, inverse
    • Borders: default, strong, muted
    • Interactive: focus ring, selection, hover overlay
  3. Generate dark mode variant (proper dark mode, not inverted)
  4. Output in project-appropriate format (CSS vars, Tailwind, shadcn theme)

Output

Complete theme configuration ready to paste into the project.