ui-color-palette-help

name	ui-color-palette-help
description	Display a quick-start guide and list all available commands. Use when the user wants to know what they can do, how to get started, or which command to use.
argument-hint	["topic"]

Help & Onboarding

Display this guide as a formatted response. No tools needed.

---

What is UI Color Palette?

A complete color system workflow in Claude — from source colors to design tools and code export.

You can build a palette from scratch, audit its accessibility, push it to Figma/Penpot/Framer/Sketch, export it as CSS/Tailwind/DTCG, and manage published palettes — all in one conversation.

---

The 4 phases

Source → Palette → Deploy → Manage

Phase	What happens
1 · Source	Pick or generate source colors (image, prompt, harmony, existing palette)
2 · Palette	Build a full shade scale, retrieve an existing palette, or audit contrast
3 · Deploy	Export as code or push to a design tool
4 · Manage	Publish, update, share, or delete a palette on the platform

Just describe what you want and the orchestrator will guide you through each phase one step at a time.

---

Commands

Invoke a specific skill directly with /ui-color-palette:<command>.

Source

Command	What it does
/ui-color-palette:generate-source-colors	Extract colors from an image, a prompt, or a base color

Palette

Command	What it does
/ui-color-palette:scale-palette	Build a full shade palette from source colors
/ui-color-palette:manage-palettes	Browse, retrieve, or search published palettes
/ui-color-palette:audit-palette	Audit contrast (WCAG 2.1 + APCA)

Deploy — Code

Command	What it does
/ui-color-palette:generate-code	Export palette as CSS, SCSS, Tailwind v3/v4, DTCG, SwiftUI, Compose…

Deploy — Design tools

Command	What it does
/ui-color-palette:figma	Push variables or styles to Figma
/ui-color-palette:penpot	Push tokens or styles to Penpot
/ui-color-palette:framer	Push styles to Framer
/ui-color-palette:sketch	Push variables or styles to Sketch

Manage

Command	What it does
/ui-color-palette:manage-palettes	Publish, update, share, unshare, or delete a palette

Meta

Command	What it does
/ui-color-palette:help	Show this guide

---

Agents

For focused, high-complexity tasks, these sub-agents are available:

Agent	When to use
palette-auditor	Deep accessibility audit, WCAG/APCA scoring, remediation
palette-codegen	Multi-format or complex code/token export
palette-transitioner	Convert PaletteData to variables, tokens, styles, or swatches
palette-publisher	Palette lifecycle (publish, update, share, delete)

---

Quick starts

I want to build a palette from scratch

Just say: "Build a palette" — the orchestrator will ask for colors, color space, scale, and themes.

I have a brand color and want a Tailwind config

/ui-color-palette:scale-palette → then /ui-color-palette:generate-code tailwind-v4

I want to check if my colors are accessible

/ui-color-palette:audit-palette with your hex values

I want to push my palette to Figma

/ui-color-palette:figma — will ask whether you need variables or styles

I already have a palette and want to export CSS

/ui-color-palette:generate-code css — no need to rebuild, the palette stays in context

---

Tips

• The active PaletteData is kept in context for the whole session — no need to rebuild it between steps.
• You can chain phases: build → audit → export → push to Figma, all in one conversation.
• If you're unsure which command to use, just describe your goal in plain language.

Arguments

$ARGUMENTS can be a topic to focus the help output:

• /ui-color-palette:help deploy — show only deploy commands
• /ui-color-palette:help figma — show Figma-specific guidance
• /ui-color-palette:help code — show code export formats