Semantic HTML & CSS

First, load and apply design-tokens — color pairs, opacity ban, minimal scale, and no dead tokens all live there.

This skill covers web-specific implementation on top of those shared rules.

Rules

1. CSS Custom Properties for All Values

Every color, size, spacing, and font value MUST be defined as a custom property under :root. No raw values in selectors.

/* ✅ Correct */
:root {
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --font-md: 1rem;
}