colorize

Solid

Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.

AI & Automation 240 stars 23 forks Updated today MIT

Install

View on GitHub

Quality Score: 91/100

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

Skill Content

Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. ## MANDATORY PREPARATION Invoke /frontend-design — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first. Additionally gather: existing brand colors. --- ## Assess Color Opportunity Analyze the current state and identify opportunities: 1. **Understand current state**: - **Color absence**: Pure grayscale? Limited neutrals? One timid accent? - **Missed opportunities**: Where could color add meaning, hierarchy, or delight? - **Context**: What's appropriate for this domain and audience? - **Brand**: Are there existing brand colors we should use? 2. **Identify where color adds value**: - **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue) - **Hierarchy**: Drawing attention to important elements - **Categorization**: Different sections, types, or states - **Emotional tone**: Warmth, energy, trust, creativity - **Wayfinding**: Helping users navigate and understand structure - **Delight**: Moments of visual interest and personality If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. **CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose. ##...

Details

Author
joewinke
Repository
joewinke/jat
Created
6 months ago
Last Updated
today
Language
Svelte
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Solid

colorize

Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.

389 Updated today
mxyhi
AI & Automation Solid

colorize

Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.

226 Updated yesterday
AkaraChen
AI & Automation Solid

colorize

Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.

5,395 Updated today
fengshao1227
Code & Development Listed

colorize

Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.

22 Updated 2 days ago
AkaraChen
Web & Frontend Listed

colorize

Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.

58 Updated 2 weeks ago
bfree-trainer