colorizelisted

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.
educlopez/ui-craft · ★ 39 · Web & Frontend · score 83

Install: claude install-skill educlopez/ui-craft

**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 the target the user described. 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. **Knob gating (VISUAL_DENSITY):** - `