Skills
.Work. You
Rest

CSS color standards

Community

Enforce HSL colors, maintain design system integrity.

Design & Creative#design system#css#styling#color palette#hsl#web design#custom properties
Authorcynthiateeters
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill enforces modern HSL color format and CSS custom properties, preventing hardcoded hex/rgb colors and ensuring a single source of truth for all HAP Learning Lab CSS. This maintains design system consistency and simplifies color management.

Core Features & Use Cases

  • HSL Exclusivity: Mandates the use of hsl() format for all colors, improving readability and maintainability.
  • Custom Properties: Enforces defining all colors in the :root block using CSS custom properties (var(--*)), ensuring a single source of truth.
  • Accessibility & Naming: Guides semantic color naming and documentation of contrast ratios for WCAG AA compliance.
  • Use Case: Before writing any new CSS, use this Skill to automatically validate that all colors are defined in HSL format using custom properties, ensuring your styles are consistent and easily maintainable.

Quick Start

Example: Check for hex colors in your CSS files

grep -r '#[0-9A-Fa-f]{3,6}' css/

Expected output: No matches (or only in comments)

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: CSS color standards
Download link: https://github.com/cynthiateeters/hap-learning-lab-template/archive/main.zip#css-color-standards

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository