css-standards

What problem does it solve?

This Skill ensures CSS color tokens follow a single, modern standard. It prevents hardcoded hex/rgb colors and enforces the use of HSL color formats and CSS custom properties, enabling a consistent design system and easier theme updates.

Core Features & Use Cases

• Enforces HSL format for all color values to promote readability and accessibility.
• Single source of truth by defining colors in one place (e.g., :root) and referencing them via CSS custom properties.
• Guides color naming and usage to ensure semantic, accessible design across components.
• Use Case: Before starting a new UI, run this Skill to ensure the CSS color tokens are defined in :root and all components reference them.

Quick Start

Use this skill before writing any CSS to set up the color tokens and enforcement rules in your project.