Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →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. Invoke when the user asks for colorize on their UI, or mentions 'colorize' alongside design / UI / frontend work.
.claude/skills/educlopez-colorize/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-05 | ✗→✓ | ▲ Improved | 721% | 0% |
| case-08 | ✗→✓ | ▲ Improved | 6567% | 0% |
| case-18 | ✓→✗ | ▼ Worse | -39% | 0% |
| case-22 | ✓→✗ | ▼ Worse | -62% | 0% |
| case-23 | ✓→✗ | ▼ Worse | -55% | 0% |
<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->
Context: this sub-skill is one lens of the broader ui-craft skill. If the ui-craft skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.
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:
:focus-visible).Where color does NOT go (anti-slop territory):
↑/↓ + tabular-nums would read cleaner.Knob gating (VISUAL_DENSITY):
≤ 4 → single accent only, max 3 placements.5-7 → single accent, 3-5 placements, status dots allowed.8+ → semantic palette (success/warning/danger) allowed beyond the single accent — dashboards and data UIs earn this.If the UI is already shouting with color, this command also removes color.
References to read: references/color.md (OKLCH, tokens, dark mode, contrast), references/accessibility.md (contrast ratios for AA/AAA).
Output: edit code directly. Lift any literal hex into CSS variables (--color-accent, --color-accent-tint) — respect existing token naming if present. Print the Review Format table. One row per placement, with the ratio check (AA/AAA) on text uses.
Next step: /tokens — promote the color decisions into the durable token spine so they survive the session (rung 2).
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→fail | 4,427 | 7,269 | +64% | 1 | 1 | 0% | 254 | 1,027 | +304% | 0 | 0 | — |
case-06 | fail→fail | 12,994 | 7,276 | -44% | 1 | 1 | 0% | 2,437 | 1,255 | -49% | 0 | 0 | — |
case-02 | fail→fail | 6,176 | 6,807 | +10% | 1 | 1 | 0% | 430 | 1,154 | +168% | 0 | 0 | — |
case-03 | fail→fail | 29,779 | 5,417 | -82% | 1 | 1 | 0% | 6,885 | 1,004 | -85% | 0 | 0 | — |
case-04 | fail→fail | 5,824 | 6,703 | +15% | 1 | 1 | 0% | 1,117 | 1,468 | +31% | 0 | 0 | — |
case-05 | fail→pass | 2,461 | 7,403 | +201% | 1 | 1 | 0% | 240 | 1,970 | +721% | 0 | 0 | — |
case-07 | fail→fail | 9,574 | 5,528 | -42% | 1 | 1 | 0% | 1,148 | 1,075 | -6% | 0 | 0 | — |
case-08 | fail→pass | 3,748 | 36,834 | +883% | 1 | 1 | 0% | 135 | 9,001 | +6567% | 0 | 0 | — |
case-09 | fail→fail | 4,325 | 6,213 | +44% | 1 | 1 | 0% | 186 | 1,177 | +533% | 0 | 0 | — |
case-10 | fail→fail | 20,179 | 6,088 | -70% | 1 | 1 | 0% | 4,583 | 1,157 | -75% | 0 | 0 | — |
case-11 | fail→fail | 36,291 | 5,853 | -84% | 1 | 1 | 0% | 8,237 | 1,076 | -87% | 0 | 0 | — |
case-12 | fail→fail | 3,040 | 4,680 | +54% | 1 | 1 | 0% | 280 | 959 | +242% | 0 | 0 | — |
case-13 | fail→fail | 4,220 | 6,357 | +51% | 1 | 1 | 0% | 245 | 1,247 | +409% | 0 | 0 | — |
case-14 | fail→fail | 4,152 | 6,591 | +59% | 1 | 1 | 0% | 221 | 1,099 | +397% | 0 | 0 | — |
case-15 | fail→fail | 5,300 | 6,693 | +26% | 1 | 1 | 0% | 269 | 1,064 | +296% | 0 | 0 | — |
case-16 | fail→fail | 22,298 | 9,094 | -59% | 1 | 1 | 0% | 158 | 1,163 | +636% | 0 | 0 | — |
case-17 | fail→fail | 7,512 | 5,727 | -24% | 1 | 1 | 0% | 1,384 | 973 | -30% | 0 | 0 | — |
case-18 | pass→fail | 10,407 | 5,872 | -44% | 1 | 1 | 0% | 1,754 | 1,073 | -39% | 0 | 0 | — |
case-19 | fail→fail | 9,825 | 5,928 | -40% | 1 | 1 | 0% | 1,632 | 1,255 | -23% | 0 | 0 | — |
case-20 | fail→fail | 14,488 | 5,262 | -64% | 1 | 1 | 0% | 2,892 | 1,106 | -62% | 0 | 0 | — |
case-21 | fail→fail | 8,843 | 5,041 | -43% | 1 | 1 | 0% | 1,813 | 1,062 | -41% | 0 | 0 | — |
case-22 | pass→fail | 12,066 | 4,894 | -59% | 1 | 1 | 0% | 2,601 | 994 | -62% | 0 | 0 | — |
case-23 | pass→fail | 11,629 | 5,630 | -52% | 1 | 1 | 0% | 2,489 | 1,118 | -55% | 0 | 0 | — |
case-24 | pass→fail | 17,779 | 4,291 | -76% | 1 | 1 | 0% | 3,965 | 990 | -75% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 24 cases were attempted, and 1 counted toward the lift figure. The other 23 produced results that are not comparable between the two arms, so they are excluded from the headline rather than averaged into it. The headline lift of -8 percentage points is the difference between those two pass rates over the 1 comparable cases. 9 cases got worse with the skill loaded, and they are included in that figure.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.