ui-color-palette-help
Skill1 starsChanged 7 months agoMITView on GitHub
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.
We split this skill into the rules it gives an agent
1 rule. About 0 are common, 1 is distinctive, and 0 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈1
Distinctive · estimate
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 121
If you're unsure which command to use, just describe your goal in plain language.
≈ “Common” is an estimate: at least 1 in 5 of the 308,232 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
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-palettewith 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
PaletteDatais 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
In this repository52 other files it gives its agents.
- gh-cliSkill
- glab-aliasSkill
- glab-apiSkill
- glab-attestationSkill
- glab-authSkill
- glab-changelogSkill
- glab-check-updateSkill
- glab-ciSkill
- glab-clusterSkill
- glab-completionSkill
- glab-configSkill
- glab-deploy-keySkill
- glab-duoSkill
- glab-gpg-keySkill
- glab-helpSkill
- glab-incidentSkill
- glab-issueSkill
- glab-iterationSkill
- glab-jobSkill
- glab-labelSkill
- glab-mcpSkill
- glab-milestoneSkill
- glab-mrSkill
- glab-opentofuSkill
- glab-quick-actionsSkill
- glab-releaseSkill
- glab-repoSkill
- glab-runner-controllerSkill
- glab-runnerSkill
- glab-scheduleSkill
- glab-securefileSkill
- glab-snippetSkill
- glab-ssh-keySkill
- glab-stackSkill
- glab-todoSkill
- glab-tokenSkill
- glab-userSkill
- glab-variableSkill
- glab-versionSkill
- glab-workitemsSkill
- gitlab-cli-skillsSkill
- ui-color-palette-audit-paletteSkill
- ui-color-palette-build-color-systemSkill
- ui-color-palette-figmaSkill
- ui-color-palette-framerSkill
- ui-color-palette-generate-codeSkill
- ui-color-palette-generate-semantic-codeSkill
- ui-color-palette-generate-source-colorsSkill
- ui-color-palette-manage-palettesSkill
- ui-color-palette-penpotSkill
- ui-color-palette-scale-paletteSkill
- ui-color-palette-sketchSkill
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
Reviews can't be read right now.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.