skills.rest
VKirill
VKirillCOMMUNITY
Explore all skills by this author →
GitHub

css-architecture-2026

Enforce ITCSS cascade layers, OKLCH tokens, and WCAG 2.2 AA in vanilla HTML/CSS.

15|2|Updated May 23, 2026
Search Tags:#accessibility#design-tokens#container-queries#oklch#css-architecture#cascade-layers#bem
One-click install
npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill css-architecture-2026
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: css-architecture-2026
Source: https://github.com/VKirill/antigravity-for-claude-code/tree/main/skills/css-architecture-2026
Command: npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill css-architecture-2026

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about css-architecture-2026

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up vanilla CSS cascade layers to stop specificity wars and avoid !important?▼

Vanilla CSS cascade layers using ITCSS-style @layer ordering establish a predictable specificity hierarchy so components never require !important and utility layers always override component styles.

What's the best way to migrate hardcoded hex colors to OKLCH design tokens?▼

Migrating hardcoded hex colors to OKLCH design tokens involves centralizing all color, space, type, radius, and motion values into a single tokens.css file, enforcing strict rules against hardcoding colors outside that file.

How do I handle mobile viewport height issues with 100vh in CSS?▼

Mobile viewport height issues with 100vh are resolved by using dvh and svh units instead, which correctly handle dynamic browser chrome and mobile address bar resizing for fullscreen layouts.

Does BEM work with cascade layers and container queries for component-based architecture?▼

BEM works with cascade layers and container queries by enforcing flat selector rules that avoid nesting depth issues, designed to port cleanly to React or Vue components later without rework.

How do I meet WCAG 2.2 AA accessibility requirements in a vanilla CSS architecture?▼

Meeting WCAG 2.2 AA requirements in vanilla CSS mandates skip-links, :focus-visible styles, reduced-motion media query handling, semantic HTML landmarks, and safe keyboard-shortcut gating as baseline architectural rules.

When should I use container queries instead of media queries for responsive layouts?▼

Container queries should be used instead of media queries when building component-driven layouts, enabling component-level breakpoints that respond to a container's available width rather than the viewport.

Related Skills

Explore More Design & Creative Skills→
DanSnowDanSnow
2

design-extractor

Audit frontend codebases for design token and component extraction opportunities.

Community
Advanced
h4vzzh4vzz
33

Frontend Design

Generate accessible React, Vue, Svelte, or HTML components with design tokens.

Community
Advanced
jpoindexterjpoindexter
1

color-and-elevation

Generate OKLCH color palettes with WCAG 2.2 AA contrast compliance.

Community
Advanced
ChwistopheChwistophe

rails-37-style-frontend-css

Implement native CSS architecture with cascade layers and OKLCH colors for Rails applications.

Community
Intermediate