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.

Web & Frontend 58 stars 7 forks Updated 1 weeks ago GPL-3.0

Install

View on GitHub

Quality Score: 73/100

Stars 20%
59
Recency 20%
90
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
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, STOP and call the AskUserQuestion tool to clarify. **CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose. ## Plan...

Details

Author
bfree-trainer
Repository
bfree-trainer/bfree
Created
5 years ago
Last Updated
1 weeks ago
Language
TypeScript
License
GPL-3.0

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

1,041 Updated 3 days ago
dtsola
Web & Frontend Solid

frontend-design

Design and build production-ready frontend interfaces with design systems, responsive layouts, accessible components, and dark mode support.

91 Updated 2 months ago
seb1n
Web & Frontend Solid

plan-design-review

Designer's eye plan review — interactive, like CEO and Eng review. Rates each design dimension 0-10, explains what would make it a 10, then fixes the plan to get there. Works in plan mode. For live site visual audits, use /design-review. Use when asked to "review the design plan" or "design critique". Proactively suggest when the user has a plan with UI/UX components that should be reviewed before implementation.

31 Updated today
aimasteracc
Web & Frontend Solid

canvas-design

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

1,696 Updated 3 weeks ago
ComposioHQ
Web & Frontend Solid

canvas-design

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

140,647 Updated 6 days ago
anthropics