Command
/colorize
Color strategy pass — introduces a single accent at 3-5 intentional placements, or reduces an over-colored UI back to 90% neutral. Use when the UI has no color identity, uses blue by default, or is shouting with too many competing accents.
One command from ui-craft.
shell
$ npx -y skills add educlopez/ui-craft --agent claude-codeShips with ui-craft. Installing the plugin gets this command.
How it fires
How this command gets triggered: by you, by Claude, or both.
- Fires itselfClaude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/colorize
Context preview
What this command does when you run it.
Color strategy pass — introduces a single accent at 3-5 intentional placements, or reduces an over-colored UI back to 90% neutral. Use when the UI has no color identity, uses blue by default, or is shouting with too many competing accents.
Stats
Stars208
Forks9
LanguageGo
LicenseMIT
Ships with ui-craft
Command definition
colorize.md
--- description: Color strategy pass — introduces a single accent at 3-5 intentional placements, or reduces an over-colored UI back to 90% neutral. Use when the UI has no color identity, uses blue by default, or is shouting with too many competing accents. argument-hint: "[file or component path]" --- Add color to the UI at `$ARGUMENTS`. Load the `ui-craft` skill. **The rule (from SKILL.md):** 90%+ neutral, one accent, 3-5 placements per viewport. Reinforce this before adding anything. More color is not more design. **Before you touch anything — ask about brand.** If a brand color exists, use it. If not, offer 2-3 options in OKLCH — include one warm (e.g., `oklch(0.67 0.19 45)`) and one cool (e.g., `oklch(0.60 0.18 250)`). Never default to blue. **Where color EARNS its place:** - Primary CTA background. - One key metric tint — accent at ~8% opacity as a subtle background, accent at full strength on the number itself. - Active state of the current nav item (underline, dot, or subtle tint — pick one). - Status dots (success / warning / danger), 6-8px, no pills. - Focus ring (`:focus-visible`). **Where color does NOT go** (anti-slop territory): - Heading gradient text. - Colored left or top borders on every card. - Uniform chips on every tag/label. - Emoji-as-icons to inject "color." - Trend arrows in green/red when a plain `↑`/`↓` + `tabular-nums` would read cleaner.
