Better Colors
Builds, audits, and standardizes design system color palettes, semantic tokens, and accessible contrast ratios using modern color spaces.
Better Colors is a specialized design system skill that generates balanced color ramps, establishes role-based semantic token architectures, and audits contrast compliance across web applications. It leverages perceptually uniform color spaces like OKLCH to create harmonious palettes, maps values strictly to semantic jobs, and catches hardcoded literals or broken role mappings before they reach production. Whether architecting a fresh token hierarchy or auditing existing Tailwind or CSS codebases for WCAG contrast violations, this skill ensures consistent, accessible, and scalable UI coloring.
主な機能
01Generates perceptually uniform color ramps using OKLCH and standard color formats
02Provides automated guidance for dark mode adaptations and P3 wide-gamut fallbacks
03Calculates and audits rendered contrast pairs against strict accessibility thresholds
04Detects hardcoded color literals, misassigned roles, and out-of-gamut values
058,811 GitHub stars
06Enforces clean separation between primitive color steps and semantic role tokens
ユースケース
01Auditing existing web projects to eliminate rogue hex values and failing contrast pairs
02Building an accessible multi-theme color token system for a new UI component library
03Refactoring Tailwind or CSS palettes into maintainable primitive and semantic layers