Web CSS Skill

Version: 1.0 Stack: Vanilla CSS with CSS Variables

Clean, maintainable CSS without preprocessors or utility frameworks. Design tokens via CSS variables.

The Problem

AI-generated CSS drifts. Without memory between sessions, similar components end up with slightly different padding, colors, spacing, and border radii — not by design, but by independence. The drift itself isn't the problem. The problem is that every future edit becomes a partial fix: you change .card's background, but .panel uses #fff, .info-box uses white, and .content-block uses rgb(255,255,255) — same color, different formats, so only one gets updated. These standards centralize values into tokens so one edit propagates everywhere.

Consumption

• Builders: Read ## Builder Checklist before writing any CSS. Every value must use a token; every file must follow the 5-file architecture.
• Refactorers: Use ## Enforced Rules to find hardcoded values and structural violations. Read narrative sections for token naming and file organization guidance.
• Both: Narrative sections are the authoritative standard. Checklist and rules table are compressed views of the same content.