Colorize — Strategic UI Color Introduction

What it does

Adds a deliberate color strategy to UI components and surfaces. The skill guides an agent through assessing a design's current color state, planning a palette (dominant, secondary, accent), and applying color semantically to actions, status indicators, charts, and backgrounds. It emphasises accessibility (WCAG contrast), brand consistency, and minimal, high-impact color use.

When to use it

Use when an interface feels flat, over-gray, or lacks visual hierarchy — for onboarding flows, dashboards, marketing pages, or component libraries. Also useful before a design pass to prepare a palette that maps to states (success, error, warning, info) and to ensure accessibility.

What's included

• Scripts: none listed in the repository (has_scripts=false).
• References: none listed (has_references=false).
• Instructions: Step-by-step guidance to audit color absence, identify opportunities, plan a 2–4 color palette, apply semantic and accent color uses, handle backgrounds, borders, typography, and decorative elements, and verify results for hierarchy and accessibility.

Compatible agents

Best for agents that can inspect frontend codebases and run style audits (design-savvy agents); compatible with general-purpose assistant agents and tooling that can modify CSS/Tailwind variables or generate design tokens.