skills.rest
juanelojga
juanelojgaCOMMUNITY
Explore all skills by this author →
GitHub

colorize

Apply a limited color palette to UI components with WCAG-compliant contrast checks.

Updated Oct 30, 2025
Search Tags:#theming#accessibility#ui-design#design-systems#color-strategy#brand-colors#colorize
One-click install
npx skills add https://github.com/juanelojga/juanelojga-webpage --skill colorize-juanelojga
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: colorize
Source: https://github.com/juanelojga/juanelojga-webpage/tree/main/.agents/skills/colorize
Command: npx skills add https://github.com/juanelojga/juanelojga-webpage --skill colorize-juanelojga

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality.

Core Features & Use Cases

  • Color strategy planning and semantic color assignment to UI components
  • Accessibility-conscious color application with contrast checks
  • Brand-aligned theming and gradual rollout across surfaces
  • Use case: apply a cohesive color system to headers, CTAs, and icons to improve recognition

Quick Start

Provide a brand color palette and start applying it to primary UI components to establish the baseline.

Frequently Asked Questions about colorize

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply a color palette to UI components while maintaining WCAG accessibility?▼

To apply a color palette accessibly, assign semantic colors to UI components and verify WCAG-compliant contrast. This ensures visual hierarchy and mood are preserved while preventing contrast failures.

What is the 60/30/10 color balance rule for UI design systems?▼

The 60/30/10 color balance is a theming strategy that distributes a limited palette across key UI components. It establishes visual hierarchy by allocating dominant, secondary, and accent proportions to enhance interface clarity.

How do I add warmth and visual hierarchy to a monochromatic UI design?▼

Add warmth to monochromatic UI by strategically introducing a purposeful, limited palette to key components like headers and CTAs. This color strategy enhances visual recognition and improves overall interface mood.

Can I use brand colors for theming semantic elements without failing contrast checks?▼

Yes, you can apply brand colors to semantic elements like buttons and links while ensuring accessibility by checking contrast. The system satisfies visual plans through defined palettes and WCAG-compliant adjustments.

Do I need a predefined brand color palette to start theming my interface?▼

You need a predefined brand color palette to start theming your interface. Providing this baseline allows you to begin applying semantic color assignments to primary UI components for cohesive visual recognition.

Related Skills

Explore More Design & Creative Skills→
wpgauravwpgaurav
14

colorize

Define a 2-4 color palette with semantic roles and WCAG contrast checks.

Community
Advanced
trycompaitrycompai
1.8k

ui

Enforce design-system tokens, theming, and accessible component patterns in React/TS frontend development.

Official
Intermediate
Prathviraj-jadhavPrathviraj-jadhav

visual-design-foundations

Apply typography, color, spacing, and iconography to create design tokens and style guides.

Community
Intermediate
leboncoinleboncoin
92

check-accessibility

Automate WCAG 2.1 AA accessibility testing of Spark UI components with Playwright.

Official
Intermediate