What is the colorize skill?
colorize is a color strategy skill, one lens of the ui-craft design system. It asks about your brand color first, then adds a single accent at three to five intentional placements per viewport, or removes color from an over-colored UI until it is about 90% neutral. It edits code directly.
colorize is a color strategy pass from the ui-craft design engineering system by educlopez. Its description says it either introduces a single accent at a few intentional placements or reduces an over-colored UI back to 90% neutral.
It is one lens of the broader ui-craft skill. If ui-craft is installed too, the agent is told to read that skill first for discovery and anti-slop rules, then apply this color lens.
How one color pass runs
- Ask about brand: use the existing brand color, or offer two or three OKLCH options with one warm and one cool.
- Check the VISUAL_DENSITY knob to decide how many accent placements the screen can carry.
- Place the accent only where color earns its place, such as the primary button or the active nav item.
- Edit the code, lifting literal hex values into CSS variables.
- Print a Review Format table with a contrast ratio check on text, then point to the /tokens step.
What changes in your agent's output
- Blue stops being the default. The skill says never default to blue and asks about brand first.
- Color shows up in a handful of places per screen, not on every card, chip and heading.
- Heading gradients, colored card borders, uniform chips and emoji used as icons are on the do not list.
- Accent values land in variables named --color-accent and --color-accent-tint, unless your project already has token names.
Who colorize is for
Best for
- Interfaces with no color identity, or ones that lean on blue by habit.
- Over-colored dashboards and landing pages that need to calm down while keeping real status colors.
- Teams that want contrast ratios checked and listed row by row.
Not for
- Rainbow or decorative palettes. The rule is one accent and mostly neutral.
- Generating full shade scales. For that, Tailwind Shades MCP is a separate tool to compare.
- Whole page redesigns. This is one lens; improve UI covers a wider pass.
Use it with UiChemy
colorize edits code directly, so what you get is real HTML and CSS. UiChemy AI to WordPress imports an AI build, and Composer then edits it inside Elementor or Gutenberg. Click Get Started on uichemy.com.
The skill points to its own color reference for OKLCH, tokens and dark mode. For a second source on theming, dark mode design and design standards are worth reading alongside it.
How to install colorize Skill: One Accent on a 90% Neutral UI
curl -fsSL https://skills.smoothui.dev/install | bashRun the install script
On macOS or Linux, run
curl -fsSL https://skills.smoothui.dev/install | bash. The README says it detects your OS, downloads the latest release, verifies the checksum and installs the ui-craft binary.Run the installer
Run
ui-craft install. It detects Claude Code, Cursor, Codex, Gemini and OpenCode, then walks you through choosing components and writes them into each tool's own config.Or use a plugin or a clone
In Claude Code, run
/plugin marketplace add educlopez/ui-craftthen/plugin install ui-craft. Another route isgit clone https://github.com/educlopez/ui-craft.git ~/.skills/ui-craft.Ask for the color pass
Ask your agent to colorize a UI at a given path or page. The skill lives at .agents/skills/colorize in the repository.
Check that it loaded
Run ui-craft doctor to check each install is coherent. Then ask the agent to colorize a page: it should ask about brand first, propose one accent and end with a Review Format table.
Key features
- The 90 percent neutral ruleThe core rule is 90% or more neutral, one accent and three to five placements per viewport. The skill says to reinforce it before adding anything, because more color is not more design.
- Brand firstBefore touching anything it asks about brand. With none, it offers two or three OKLCH options, such as a warm oklch(0.67 0.19 45) and a cool oklch(0.60 0.18 250).
- Where color earns a placeThe primary button background, one key metric tint, the active nav item, small status dots, and the focus ring on :focus-visible.
- Where color stays outHeading gradient text, colored borders on every card, uniform chips on every label and emoji standing in for icons are ruled out. Plain arrows with tabular numbers beat green and red trend arrows.
- Density gatingAt VISUAL_DENSITY 4 or below it allows one accent and up to three placements. From 5 to 7 it allows three to five and status dots. At 8 or more, dashboards earn a semantic palette.
- Reduce modeFor an over-colored UI it counts accents per viewport, cuts to one to three, mutes decorative color and keeps semantic color such as status dots, focus rings and active nav underlines.
- Token friendly outputIt lifts any literal hex into CSS variables named --color-accent and --color-accent-tint, and respects existing token naming if your project has one.
- Contrast review tableIt prints the Review Format table with one row per placement and an AA or AAA ratio check on text uses.
- Color and accessibility referencesThe skill points to references/color.md for OKLCH, tokens, dark mode and contrast, and references/accessibility.md for AA and AAA ratios.
- Token handoffThe suggested next step is /tokens, which promotes the color decisions into the durable token layer so they survive the session.
Frequently asked questions
What is the colorize skill?
It is a color strategy skill from the ui-craft system by educlopez. It either adds a single accent at a few chosen placements or pulls an over-colored interface back to mostly neutral, and it edits your code directly.
How do I install colorize?
The README recommends its install script followed by ui-craft install, which sets up the whole system across the tools it detects. It also lists a plugin route and a plain git clone. Check ui-craft doctor afterward to confirm each install is coherent.
Which AI coding agents can use colorize?
The README says ui-craft install detects Claude Code, Cursor, Codex, Gemini and OpenCode, and the repository has mirror folders for several of them. The plugin route is for Claude Code. Other agents trigger the sub-skills by intent, so test yours.
What is the rule colorize follows?
It keeps a UI at 90% or more neutral, with one accent and three to five placements per viewport. The primary button, one metric tint, the active nav item, status dots and the focus ring are the places color is meant to appear.
What does colorize do to an over-colored UI?
It counts accents per viewport and cuts them to one to three, keeping the main button accent. It mutes decorative color like tinted cards and heading gradients, and keeps semantic color for real status, focus rings and active nav.
Do I need the full ui-craft skill to use colorize?
The SKILL.md calls this a sub-skill and one lens of ui-craft. If ui-craft is installed, the agent reads it first for discovery and anti-slop rules. The CLI install brings the whole system, while a skill-only install leaves out review agents and gates.
What license does colorize use?
The ui-craft repository is MIT licensed and has 371 stars. The last push was on September 3, 2026. Look at recent commits and issues before relying on it in production work.