ui-color-palette-generate-code
Skill1 starsChanged 7 months agoMITView on GitHub
Export palette configuration as code or design tokens via the generate_code MCP tool using base and themes. Supports CSS, SCSS, Less, Tailwind v3/v4, SwiftUI, UIKit, Compose, Android resources, DTCG, Style Dictionary, CSV, and more.
We split this skill into the rules it gives an agent
6 rules. About 0 are common, 0 are distinctive, and 6 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈0
Distinctive · estimate
This author's own choices. Worth a look.
6
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 9
Use the ui-color-palette MCP tool generate_code to export palette configuration into the requested format.
- Very specific: line 13
Reuse rule — Palette Inputs: If base and themes are already present in the conversation context, reuse them directly.
- Very specific: line 15
Reuse rule — GeneratedCode: If code has already been generated for the requested format in this session, display it directly without …
- Very specific: line 53
Ask which format (and colorSpace if applicable) if not already specified.
- Very specific: line 55
Call generate_code with base, themes, and chosen parameters.
- Very specific: line 59
Format hints: prefer tailwind-v4 over v3 for new projects — prefer dtcg-tokens for token interoperability.
≈ “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
Export Palette as Code
Use the ui-color-palette MCP tool generate_code to export palette configuration into the requested format.
generate_code now expects base and themes directly. A prior get_palette call is not required.
Reuse rule — Palette Inputs: If base and themes are already present in the conversation context, reuse them directly. Never regenerate the palette just to call generate_code.
Reuse rule — GeneratedCode: If code has already been generated for the requested format in this session, display it directly without calling generate_code again. Only regenerate if the user explicitly asks for a fresh export or changes a parameter (format, color space).
Tool — generate_code
| Parameter | Type | Required | Description |
base | object | Yes | Base palette configuration |
themes | array | Yes | Theme configurations (light/dark or other modes) |
format | enum | No | Output format (default: css) |
colorSpace | enum | No | Color space for output values (default: RGB) |
format values
| Value | Description | colorSpace used? |
css | CSS custom properties | Yes |
scss | SCSS variables | Yes |
less | Less variables | Yes |
tailwind-v3 | Tailwind CSS v3 config | No |
tailwind-v4 | Tailwind CSS v4 @theme block | No |
swift-ui | SwiftUI Color extensions | No |
ui-kit | UIKit UIColor extensions | No |
compose | Jetpack Compose constants | No |
resources | Android XML color resources | No |
csv | CSV spreadsheet | No |
native-tokens | Native JSON token format | No |
dtcg-tokens | DTCG JSON | Yes |
style-dictionary-v3 | Style Dictionary v3 | No |
universal-json | Universal JSON flat key/value | No |
colorSpace applies only to css, scss, less, and dtcg-tokens. Values: RGB · LCH · OKLCH · LAB · OKLAB · HSL · HSLUV · HSV · CMYK · HEX · P3
Workflow
- Ask which
format(andcolorSpaceif applicable) if not already specified. - Confirm
baseandthemesare available. If missing, ask for them or recover them from prior palette configuration context. - Call
generate_codewithbase,themes, and chosen parameters. - Do not read or analyze the returned code. Present it directly in a fenced code block as returned by the tool. Do not parse, summarize, or reason over its content — the output can be very large.
- Offer to write it to a file or open a PR via
gh-cli/gitlab-cli-skills.
Format hints: prefer tailwind-v4 over v3 for new projects — prefer dtcg-tokens for token interoperability.
Delegate this skill to palette-codegen for multi-format or normalized projection workflows.
palette-codegen— validatesbaseandthemes, selects the right projection, and generates code in the requested format
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-semantic-codeSkill
- ui-color-palette-generate-source-colorsSkill
- ui-color-palette-helpSkill
- 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.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
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.