colorize
starsforks
How to install colorize?
heyhank-app/heyhank/colorize
$npx -y skills add heyhank-app/heyhank --skill colorizeAdd strategic color to features that are too monochromatic or lack visual interest. Makes interfaces more engaging and expressive.
SKILL.md
| 1 | Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. |
| 2 | |
| 3 | ## MANDATORY PREPARATION |
| 4 | |
| 5 | ### Context Gathering (Do This First) |
| 6 | |
| 7 | You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality/tone, and especially existing brand colors. |
| 8 | |
| 9 | Attempt to gather these from the current thread or codebase. |
| 10 | |
| 11 | 1. If you don't find *exact* information and have to infer from existing design and functionality, you MUST STOP and STOP and call the AskUserQuestionTool to clarify. whether you got it right. |
| 12 | 2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST STOP and call the AskUserQuestionTool to clarify. clarifying questions first to complete your context. |
| 13 | |
| 14 | Do NOT proceed until you have answers. Guessing leads to generic AI slop colors. |
| 15 | |
| 16 | ### Use frontend-design skill |
| 17 | |
| 18 | Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts. |
| 19 | |
| 20 | --- |
| 21 | |
| 22 | ## Assess Color Opportunity |
| 23 | |
| 24 | Analyze the current state and identify opportunities: |
| 25 | |
| 26 | 1. **Understand current state**: |
| 27 | - **Color absence**: Pure grayscale? Limited neutrals? One timid accent? |
| 28 | - **Missed opportunities**: Where could color add meaning, hierarchy, or delight? |
| 29 | - **Context**: What's appropriate for this domain and audience? |
| 30 | - **Brand**: Are there existing brand colors we should use? |
| 31 | |
| 32 | 2. **Identify where color adds value**: |
| 33 | - **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue) |
| 34 | - **Hierarchy**: Drawing attention to important elements |
| 35 | - **Categorization**: Different sections, types, or states |
| 36 | - **Emotional tone**: Warmth, energy, trust, creativity |
| 37 | - **Wayfinding**: Helping users navigate and understand structure |
| 38 | - **Delight**: Moments of visual interest and personality |
| 39 | |
| 40 | If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify. |
| 41 | |
| 42 | **CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose. |
| 43 | |
| 44 | ## Plan Color Strategy |
| 45 | |
| 46 | Create a purposeful color introduction plan: |
| 47 | |
| 48 | - **Color palette**: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals) |
| 49 | - **Dominant color**: Which color owns 60% of colored elements? |
| 50 | - **Accent colors**: Which colors provide contrast and highlights? (30% and 10%) |
| 51 | - **Application strategy**: Where does each color appear and why? |
| 52 | |
| 53 | **IMPORTANT**: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more. |
| 54 | |
| 55 | ## Introduce Color Strategically |
| 56 | |
| 57 | Add color systematically across these dimensions: |
| 58 | |
| 59 | ### Semantic Color |
| 60 | - **State indicators**: |
| 61 | - Success: Green tones (emerald, forest, mint) |
| 62 | - Error: Red/pink tones (rose, crimson, coral) |
| 63 | - Warning: Orange/amber tones |
| 64 | - Info: Blue tones (sky, ocean, indigo) |
| 65 | - Neutral: Gray/slate for inactive states |
| 66 | |
| 67 | - **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.) |
| 68 | - **Progress indicators**: Colored bars, rings, or charts showing completion or health |
| 69 | |
| 70 | ### Accent Color Application |
| 71 | - **Primary actions**: Color the most important buttons/CTAs |
| 72 | - **Links**: Add color to clickable text (maintain accessibility) |
| 73 | - **Icons**: Colorize key icons for recognition and personality |
| 74 | - **Headers/titles**: Add color to section headers or key labels |
| 75 | - **Hover states**: Introduce color on interaction |
| 76 | |
| 77 | ### Background & Surfaces |
| 78 | - **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`) |
| 79 | - **Colored sections**: Use subtle background colors to separate areas |
| 80 | - **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue) |
| 81 | - **Cards & surfaces**: Tint cards or surfaces slightly for warmth |
| 82 | |
| 83 | **Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness *look* equal. Great for generating harmonious scales. |
| 84 | |
| 85 | ### Data Visualization |
| 86 | - **Charts & graphs**: Use color to encode categories or values |
| 87 | - **Heatmaps**: Color intensity shows density or importance |
| 88 | - **Comparison**: Color coding for different datasets or timeframes |
| 89 | |
| 90 | ### Borders & Accents |
| 91 | - **Accent borders**: Add colored left/top borders to cards or sections |
| 92 | - **Underlines**: Color underlines for emphasis or active states |
| 93 | - **Dividers**: Subtle colored dividers instead of gray lines |
| 94 | - **Focus rings**: Colored focus indicators matching brand |
| 95 | |
| 96 | ### Typography Color |
| 97 | - **Colored headings**: Use brand colors for section headings (maintain contrast) |
| 98 | - **Highlight text**: Color for emphasi |
People who liked this also viewed
6 picksType
- lark-openapi-explorer飞书/Lark 原生 OpenAPI 探索：从官方文档库中挖掘未经 CLI 封装的原生 OpenAPI 接口。当用户的需求无法被现有 lark-* skill 或 lark-cli 已注册命令满足，需要查找并调用原生飞书 OpenAPI 时使用。SkillsJul 2026
- lark-skill-maker创建 lark-cli 的自定义 Skill。当用户需要把飞书 API 操作封装成可复用的 Skill（包装原子 API 或编排多步流程）时使用。SkillsJul 2026
- azure-cost-optimizationOfficial agent plugin providing skills and MCP server configurations for Azure scenarios.SkillsJul 2026
- vercel-react-native-skillsVercel's official collection of agent skillsSkillsJul 2026
- mcp-builderGuide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate externaSkillsJul 2026
- gws-sharedgws CLI: Shared patterns for authentication, global flags, and output formatting.SkillsJul 2026
