From role-frontend
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.
npx claudepluginhub rnavarych/alpha-engineer --plugin role-frontendThis skill is limited to using the following tools:
- Choosing a CSS methodology (BEM, ITCSS, CUBE CSS) for a new project or team
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.
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.
Guides agent creation for Claude Code plugins with file templates, frontmatter specs (name, description, model), triggering examples, system prompts, and best practices.
@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