colorize

Name: colorize
Author: educlopez

346installs8forks

How to install colorize?

educlopez/ui-craft/colorize

$npx -y skills add educlopez/ui-craft --skill colorize

Installs into the current project.

Summary

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 o

Files · 1

View on GitHub

SKILL.md

1	<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->
2
3	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.
4
5	Add color to the UI at the target the user described. Load the `ui-craft` skill.
6
7	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.
8
9	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.
10
11	Where color EARNS its place:
12
13	- Primary CTA background.
14	- One key metric tint — accent at ~8% opacity as a subtle background, accent at full strength on the number itself.
15	- Active state of the current nav item (underline, dot, or subtle tint — pick one).
16	- Status dots (success / warning / danger), 6-8px, no pills.
17	- Focus ring (`:focus-visible`).
18
19	Where color does NOT go (anti-slop territory):
20
21	- Heading gradient text.
22	- Colored left or top borders on every card.
23	- Uniform chips on every tag/label.
24	- Emoji-as-icons to inject "color."
25	- Trend arrows in green/red when a plain `↑`/`↓` + `tabular-nums` would read cleaner.
26
27	Knob gating (VISUAL_DENSITY):
28	- `≤ 4` → single accent only, max 3 placements.
29	- `5-7` → single accent, 3-5 placements, status dots allowed.
30	- `8+` → semantic palette (success/warning/danger) allowed beyond the single accent — dashboards and data UIs earn this.
31
32	## Over-colored? Reduce.
33
34	If the UI is already shouting with color, this command also removes color.
35
36	1. Count accents per viewport. Cut to 1-3. The primary CTA keeps its accent; everything else goes neutral unless it's a true semantic state (success/warning/danger on a real status).
37	2. Mute decorative color. Background patterns, tinted cards without meaning, colored left borders on every list item, heading gradients, colored pills on every tag → gone.
38	3. Keep semantic, cut decorative. Status dots, focus rings, active-nav underlines stay. Color as ornament goes.
39
40	References to read: `references/color.md` (OKLCH, tokens, dark mode, contrast), `references/accessibility.md` (contrast ratios for AA/AAA).
41
42	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.

educlopezPublisher · 32 listings

Preview

educlopez/ui-craft

<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirr

**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

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.

Repoeduclopez/ui-craft

LicenseMIT

TypeSkills

CategoryDesign

UpdatedJul 2026

Repo stars206

First seenJul 22, 2026

People who liked this also viewed

6 picks

Type

colorize

346installs8forks

View on GitHub

How to install colorize?

educlopez/ui-craft/colorize

$npx -y skills add educlopez/ui-craft --skill colorize

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->
2
3	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.
4
5	Add color to the UI at the target the user described. Load the `ui-craft` skill.
6
7	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.
8
9	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.
10
11	Where color EARNS its place:
12
13	- Primary CTA background.
14	- One key metric tint — accent at ~8% opacity as a subtle background, accent at full strength on the number itself.
15	- Active state of the current nav item (underline, dot, or subtle tint — pick one).
16	- Status dots (success / warning / danger), 6-8px, no pills.
17	- Focus ring (`:focus-visible`).
18
19	Where color does NOT go (anti-slop territory):
20
21	- Heading gradient text.
22	- Colored left or top borders on every card.
23	- Uniform chips on every tag/label.
24	- Emoji-as-icons to inject "color."
25	- Trend arrows in green/red when a plain `↑`/`↓` + `tabular-nums` would read cleaner.
26
27	Knob gating (VISUAL_DENSITY):
28	- `≤ 4` → single accent only, max 3 placements.
29	- `5-7` → single accent, 3-5 placements, status dots allowed.
30	- `8+` → semantic palette (success/warning/danger) allowed beyond the single accent — dashboards and data UIs earn this.
31
32	## Over-colored? Reduce.
33
34	If the UI is already shouting with color, this command also removes color.
35
36	1. Count accents per viewport. Cut to 1-3. The primary CTA keeps its accent; everything else goes neutral unless it's a true semantic state (success/warning/danger on a real status).
37	2. Mute decorative color. Background patterns, tinted cards without meaning, colored left borders on every list item, heading gradients, colored pills on every tag → gone.
38	3. Keep semantic, cut decorative. Status dots, focus rings, active-nav underlines stay. Color as ornament goes.
39
40	References to read: `references/color.md` (OKLCH, tokens, dark mode, contrast), `references/accessibility.md` (contrast ratios for AA/AAA).
41
42	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.

educlopezPublisher · 32 listings

Preview

educlopez/ui-craft

<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirr

**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

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.

Repoeduclopez/ui-craft

LicenseMIT

TypeSkills

CategoryDesign

UpdatedJul 2026

Repo stars206

First seenJul 22, 2026

People who liked this also viewed

6 picks

Type