What problem does it solve? Maintaining a consistent visual identity across a growing Express/Mustache web app is hard: styles drift, colors get hardcoded, and page entry files bloat with component rules. This Skill codifies the repository's CSS architecture so every style change follows the same warm editorial theme and structural conventions. ## Core Features & Use Cases - Token Enforcement: Ensures colors, fonts, radii, shadows, and spacing come from tokens.css variables instead of hardcoded values, with color-mix(...) for state variants. - Structural Class Discipline: Separates shared shells (.surface-host, .surface-card) from semantic component classes, keeping page entry files as slim composition layers. - Component File Ownership: Maps each UI component to a dedicated file under web/src/css/components/ with nested selectors and colocated responsive rules. - Use Case: When adding a new dashboard card, the Skill guides you to reuse the event-card.css base treatment, add structural classes in markup, and put only page-specific overrides in the dashboard stylesheet. ## Quick Start Review my new dashboard component styles against the project's CSS standards and fix any violations.
