Add strategic color to monochromatic UI components with WCAG-compliant palettes.
npx skills add https://github.com/SL-A-SH/my-portfolio --skill colorize-sl-a-sh
Please help me install this Agent Skill. Skill: colorize Source: https://github.com/SL-A-SH/my-portfolio/tree/main/.claude/skills/colorize Command: npx skills add https://github.com/SL-A-SH/my-portfolio --skill colorize-sl-a-sh
Many interfaces are visually flat, overly monochromatic, or lack clear visual hierarchy, making it hard for users to scan, understand states, and feel engaged. This Skill helps designers and frontend engineers add purposeful color that communicates meaning, improves hierarchy, and injects personality without creating visual noise.
Apply the colorize skill to the main dashboard component by selecting a dominant brand color, adding one secondary color and one accent, and validating all text and UI contrasts against WCAG guidelines.
High-intent search queries and answers about installing and using this skill.
Improve visual hierarchy by introducing strategic color to flat dashboards, assigning a dominant brand color to primary CTAs, a secondary color for highlights, and an accent for status badges to clarify states.
Add semantic colors by assessing opportunities for categorization and wayfinding, then recommending a limited palette of 2 to 4 colors plus neutrals to define dominant, secondary, and accent application roles.
You need existing brand colors or must perform a context-gathering step to define a palette, ensuring introduced colors align with semantic states, call-to-action emphasis, and visual separation.
Yes, this approach enforces WCAG contrast ratios for text and UI elements, avoids color-only cues for accessibility, and prefers the OKLCH color space to maintain perceptual uniformity across the interface.
Use the OKLCH color space for UI design to achieve perceptual uniformity, ensuring color adjustments for visual hierarchy and semantic states appear consistent and predictable to the human eye.
Avoid adding more colors when it creates visual noise; instead, use a limited 2 to 4 color palette plus neutrals to inject personality and communicate meaning without overwhelming the user's scanning process.
petbrainsGenerate accessible color palettes and themes from brand colors with WCAG contrast validation.
tmarsbrCreate production-grade frontend interfaces with semantic HTML and CSS variables.
futuregeraldProvides practical UI/UX design principles for developers to build polished web interfaces and dashboards.
ChoreShoreValidate WCAG 2.1 color contrast ratios and suggest compliant alternatives.
