Skill

role-frontend:css-architecture

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.

Install

npx claudepluginhub rnavarych/alpha-engineer --plugin role-frontend

Tool Access

This skill is limited to using the following tools:

ReadGrepGlobBash

Preview

- Choosing a CSS methodology (BEM, ITCSS, CUBE CSS) for a new project or team

Supporting Assets

references/layout-responsive-dark-mode.mdreferences/methodologies-modules-css-in-js.mdreferences/tailwind-tokens-modern-css.md

SKILL.md

Similar Skills

skill-lookup

Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.

prompts.chat

157.6k

prompt-lookup

Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.

prompts.chat

157.6k

Agent Development

6 files

Guides agent creation for Claude Code plugins with file templates, frontmatter specs (name, description, model), triggering examples, system prompts, and best practices.

plugin-dev

83.2k

Stats

Parent Repo Stars9

Parent Repo Forks0

Last CommitMar 3, 2026

Actions

View Source View Plugin View on GitHub View README

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, @layer for 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, Linaria

references/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-visibility

references/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

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, @layer for 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, Linaria
references/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-visibility
references/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