Our review
Provides expertise in CSS architecture including methodologies, design tokens, modern CSS features, and responsive design patterns.
Strengths
- Covers multiple methodologies (BEM, ITCSS, CUBE CSS)
- Includes modern CSS features (container queries, native nesting)
- Addresses performance and anti-patterns
Limitations
- May not cover very new or experimental CSS features
- Focuses on architecture, not basic CSS syntax
- Can be overwhelming for beginners
When to use it
When choosing a CSS methodology or setting up a design token system for a new project.
When not to use it
For simple projects with minimal CSS needs where a single stylesheet is sufficient.
Security analysis
SafeQuality score95/100
The skill provides CSS architecture guidance using only read and analysis tools; Bash is listed but no destructive or data-exfiltrating commands are instructed. The presence of Bash does not introduce meaningful risk in this context.
No concerns found
Examples
Set up a design token system
Set up a design token system using CSS custom properties with three tiers (global, semantic, component) for a new project.Migrate to zero-runtime CSS-in-JS
Convert a styled-components project to Vanilla Extract for zero-runtime CSS-in-JS, explaining the migration steps.Build a responsive component with container queries
Implement a responsive grid layout using CSS Grid and container queries that adapts to component width, not viewport size.name: css-architecture description: | CSS architecture expertise including BEM methodology, CSS Modules, Tailwind CSS, CSS-in-JS (styled-components, Emotion), design tokens, responsive design patterns, CSS Grid/Flexbox layouts, and container queries. allowed-tools: Read, Grep, Glob, Bash
CSS Architecture
When to use
- Choosing a CSS methodology (BEM, ITCSS, CUBE CSS) for a new project or team
- Setting up CSS Modules, styled-components, Vanilla Extract, or Panda CSS
- Configuring Tailwind with custom design tokens
- Implementing a design token system with CSS custom properties
- Using modern CSS (container queries, :has(), @layer, native nesting, subgrid)
- Building responsive layouts with Grid/Flexbox
- Adding dark mode support or scroll-driven animations
- Diagnosing specificity wars, paint performance, or layout thrashing
Core principles
- Native HTML semantics before CSS tricks — right element reduces styling complexity
- Flat specificity — BEM single-class selectors,
@layerfor ordering, never!important - Design tokens as single source of truth — global → semantic → component tiers
- Zero-runtime CSS-in-JS for scale — Vanilla Extract or Panda CSS over styled-components in large apps
- Container queries for components, media queries for pages — components should not know viewport size
Reference Files
references/methodologies-modules-css-in-js.md— BEM/ITCSS/CUBE CSS comparison, CSS Modules with composes, styled-components with ThemeProvider, Emotion, Vanilla Extract, Panda CSS, StyleX, Linariareferences/tailwind-tokens-modern-css.md— Tailwind config, group/peer modifiers, dark mode, UnoCSS; design token three-tier system, CSS custom properties, responsive tokens; container queries, native nesting, :has(), @layer, subgrid, oklch color, fluid typography, scroll-driven animations, content-visibilityreferences/layout-responsive-dark-mode.md— CSS Grid named areas, auto-fill grid, Flexbox guidance, mobile-first responsive design, responsive images, dark mode system/manual toggle, CSS performance (will-change, paint containment, critical CSS), animation GPU properties, anti-patterns table
Related skills
Next.js App Router Expert
Development
A skill that turns Claude into a Next.js App Router expert.
Claude CodeCursoradvanced
890
234
2,846
README Generator
Development
Creates professional and comprehensive README.md files for your projects.
claudeCursorWindsurfbeginner
259
72
821
API Documentation Writer
Development
Generates comprehensive API documentation in OpenAPI/Swagger format.
claudeCursorWindsurfintermediate
156
44
682