Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Colorize · fengshao1227 | DecimalAI

frontendby fengshao1227

Colorize

fengshao1227/colorize

Source fengshao1227/ccg-workflow ↗License MIT

Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive.

NewMaintained

Automatic

Frontend / UI pack

Last verified 8/9/2026

What it changes

Passed 15 of 20 test cases with the skill, and 15 of 20 without it.

Without skill73%

With skill73%

Checks it passed that the model alone missed

Uses OKLCH color space notation for neutral surface background tints.

1 fixed15 passed either way5 still failing1 broke

Pass-rate lift: 0 pp
Tokens: +75%
Agent turns: 0%
Response time: +7%

Model gemini-3.6-flashMeasured 8/9/2026v116 of 22 cases passed with skill · 20 comparable

Tokens, turns and time describe resource use, not a dollar price.

Use this skill

Save it into your project's skills folder. Claude Code picks it up in its next session.

curl -fsSL --create-dirs -o .claude/skills/fengshao1227-colorize/SKILL.md https://app.decimal.ai/s/fengshao1227-colorize/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add fengshao1227-colorize, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"

1 · One-time — install the CLI (docs ↗)

pip install "decimalai>=0.15"

2 · Get the skill — writes .agents/skills/fengshao1227-colorize/ and pins it in .decimal/skills.lock

decimalai skills add fengshao1227-colorize

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/fengshao1227-colorize/SKILL.md https://app.decimal.ai/s/fengshao1227-colorize/SKILL.md

Raw file: /s/fengshao1227-colorize/SKILL.md ↗ · machine-readable summary at /s/fengshao1227-colorize.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

A test case the skill fixed. Same model, same prompt, with and without the skill.

Prompt

For our CSS card components on a light theme workspace app, developers currently use `#f5f5f5` for card backgrounds and pure `#ffffff` for modal content. Provide CSS updates to make the neutral background surfaces feel warmer and more sophisticated.

What was checked, without and with the skill
Checked	Without skill	With skill
Uses OKLCH color space notation for neutral surface background tints.	Missed	Passed
Replaces pure gray `#f5f5f5` with a subtle warm or cool tinted surface.	Passed	Passed

case-06 · gemini-3.6-flash · 8/9/2026 · answers are capped and redacted

What's inside

The instructions your model reads when the skill loads.

SKILL.md135 linessingle file

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:

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?
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 using AskUserQuestion.

CRITICAL: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose.

Plan Color Strategy

Create a purposeful color introduction plan:

Color palette: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals)
Dominant color: Which color owns 60% of colored elements?
Accent colors: Which colors provide contrast and highlights? (30% and 10%)
Application strategy: Where does each color appear and why?

IMPORTANT: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more.

Track record

Benchmark

15 / 20

test cases passed, vs 15 / 20 without

Adoption

Users: 0
Times used: 0

Safety and source details

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

fengshao1227 / ccg-workflow

templates/skills/impeccable/colorize/SKILL.md

View on GitHub ↗

License MITImported 9/1/2026Version v1

Other skills for the same job

Published skills whose descriptions closely match this one, with their headline benchmark lift.

bilal140202/colorizeAdd strategic color to features that are too monochromatic or lack visual interest. Makes interfaces more engaging and expressive.Near-identical description0 pp pass-rate lift

More skills from the same source and nearby in the registry, with their headline benchmark lift.