UI Color Palette — Skills

Shared, addressable source of Claude Code skills for the UI Color Palette toolkit — color palette generation, contrast auditing, semantic token systems, code export, and design-tool sync (Figma, Penpot, Sketch, Framer).

This repo is the canonical source for these skills. It is meant to be consumed as a whole or one skill at a time — see Install.

How this fits together

Repo	Role
skills-ui-color-palette (this repo)	Canonical source for every ui-color-palette-* skill
specs-ui-color-palette	Design/requirement records behind these skills — not loaded by Claude, human-facing
claude-ui-color-palette	The full Claude Code plugin: these skills + subagents (palette-auditor, palette-codegen, palette-color-systemer, palette-publisher, palette-transitioner, uicper) + MCP wiring, distributed via the Yelbolt marketplace

Install the full plugin for the guided, orchestrated experience (subagents, session-state handoffs, the uicper orchestrator). Install from this repo instead when you only need one or two specific skills in a project that isn't running the full plugin.

Requirements

Every skill here calls the ui-color-palette MCP server:

{
  "mcpServers": {
    "ui-color-palette": {
      "type": "http",
      "url": "https://mcp-uicp.yelbolt.workers.dev/mcp"
    }
  }
}

The four platform skills (figma, penpot, sketch, framer) additionally require the matching platform's own MCP server — see each skill's row in the catalog below.

Install

Everything

git clone https://github.com/a-ng-d/skills-ui-color-palette.git .claude/vendor/uicp-skills

Then symlink whichever skills you want into .claude/skills/ (Claude Code discovers skills one level under .claude/skills/<name>/SKILL.md, not inside a vendored subpath):

ln -s ../vendor/uicp-skills/ui-color-palette-scale-palette .claude/skills/ui-color-palette-scale-palette

Just what you need

Each skill is a top-level folder, so it's independently addressable via sparse-checkout — no need to pull the whole repo:

git clone --no-checkout https://github.com/a-ng-d/skills-ui-color-palette.git .claude/vendor/uicp-skills
cd .claude/vendor/uicp-skills
git sparse-checkout init --cone
git sparse-checkout set ui-color-palette-audit-palette ui-color-palette-scale-palette
cd -
ln -s ../vendor/uicp-skills/ui-color-palette-audit-palette .claude/skills/ui-color-palette-audit-palette
ln -s ../vendor/uicp-skills/ui-color-palette-scale-palette .claude/skills/ui-color-palette-scale-palette

Add more later with git -C .claude/vendor/uicp-skills sparse-checkout add <skill-name>.

Skills catalog

The workflow runs in four phases — most projects only need a handful of these.

1 · Source

Skill	Description
ui-color-palette-generate-source-colors	Generate source colors from an image (k-means), a text prompt (AI), a base-color harmony, or extraction from a connected design tool

2 · Palette

Skill	Description
ui-color-palette-scale-palette	Build a full shade palette from source colors via get_palette, with visual preview
ui-color-palette-audit-palette	Audit contrast against WCAG 2.1 and APCA, with a global contrast score
ui-color-palette-manage-palettes	Browse, publish, share, update, and delete palettes on the UI Color Palette platform (OAuth-gated for write operations)

2.5 · Color system

Skill	Description
ui-color-palette-build-color-system	Define a semantic token taxonomy (role/state/prominence/surface…) and resolve bindings against a palette via get_color_system

3 · Deploy

Skill	Description	Extra MCP server
ui-color-palette-generate-code	Export palette as CSS, SCSS, Less, Tailwind v3/v4, SwiftUI, UIKit, Compose, Android resources, DTCG, Style Dictionary, CSV…	—
ui-color-palette-generate-semantic-code	Same formats, plus a semantics file generated from a color system	—
ui-color-palette-figma	Push primitive/semantic variables or paint styles to Figma	figma / figma-desktop
ui-color-palette-penpot	Push primitive/semantic tokens or color styles to Penpot	penpot
ui-color-palette-sketch	Push primitive/semantic swatches or shared styles to Sketch	sketch
ui-color-palette-framer	Push color styles to Framer	framer

Meta

Skill	Description
ui-color-palette-help	Quick-start guide and command index — the only skill with no MCP dependency

Skill structure

Most skills are a single SKILL.md. The four platform skills (figma, penpot, sketch, framer) are routing layers with a references/ folder of operational sub-skills (extract, generate variables/tokens, generate styles, generate preview) — keep references/ alongside SKILL.md when vendoring one of these.

What's not in this repo

Subagents (palette-auditor, palette-codegen, palette-color-systemer, palette-publisher, palette-transitioner, uicper) are defined in claude-ui-color-palette, not here — several skills mention a "recommended subagent" for deeper work; that subagent is only available when the full plugin is installed.

License

MIT — part of the UI Color Palette project by Yelbolt.