Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From role-frontend
Provides CSS architecture expertise on BEM, CSS Modules, Tailwind, CSS-in-JS (styled-components, Emotion), design tokens, responsive Grid/Flexbox layouts, container queries. Use for methodology selection, setup, modern CSS, and performance diagnosis.
npx claudepluginhub rnavarych/alpha-engineer --plugin role-frontendHow this skill is triggered — by the user, by Claude, or both
Slash command
/role-frontend:css-architectureThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
- Choosing a CSS methodology (BEM, ITCSS, CUBE CSS) for a new project or team
CSS conventions, layout systems, and modern patterns: predictable styles through low specificity and explicit cascade control. Invoke whenever task involves any interaction with CSS code — writing, reviewing, refactoring, debugging, or understanding stylesheets, SCSS, layout, or responsive design.
Guides Tailwind CSS v4 configuration with CSS-first @theme directives, design tokens, container queries, and responsive patterns.
Share bugs, ideas, or general feedback.
@layer for ordering, never !importantreferences/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