css-architecture-2026

What problem does it solve?

This skill prevents fragile, AI-generated CSS that hardcodes colors and sizes, causes specificity wars, breaks dark mode, and ignores accessibility—by enforcing a production-grade ITCSS + cascade-layers architecture for vanilla HTML/CSS projects.

Core Features & Use Cases

• ITCSS-style cascade layers: defines a predictable @layer order so components don’t require !important and utilities always win.
• Semantic design tokens with OKLCH: centralizes color/space/type/radius/motion into tokens.css using perceptual OKLCH values, with strict “no hardcoding” rules.
• Modern layout + responsive strategy: uses logical properties, @container queries for component breakpoints, and dvh/svh instead of 100vh for mobile correctness.
• Accessibility baseline (WCAG 2.2 AA): mandates skip-links, :focus-visible, reduced-motion handling, semantic HTML landmarks, and safe keyboard-shortcut gating.
• BEM that migrates cleanly: enforces flat BEM selector rules designed to port to React/Vue components later without rework.
• View Transitions-ready UI styling: supports modern state-swap visuals while preserving fallbacks and user preference handling.

Quick Start

Use the css-architecture-2026 skill to generate a fresh vanilla design foundation for a CRM dashboard using tokens.css, ITCSS layers, BEM blocks, OKLCH theming, and WCAG 2.2 AA accessibility, starting from your existing HTML/CSS.