colorize

Featured

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.

Web & Frontend 324 stars 18 forks Updated 1 weeks ago MIT

Install

View on GitHub

Quality Score: 87/100

Stars 20%
84
Recency 20%
90
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

<!-- 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:** - 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...

Details

Author
educlopez
Repository
educlopez/ui-craft
Created
5 months ago
Last Updated
1 weeks ago
Language
JavaScript
License
MIT

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category