Notre avis
Fournit une expertise en architecture CSS incluant les méthodologies, les design tokens, les fonctionnalités CSS modernes et les motifs de conception responsive.
Points forts
- Couvre plusieurs méthodologies (BEM, ITCSS, CUBE CSS)
- Inclut les fonctionnalités CSS modernes (container queries, imbrication native)
- Aborde les performances et les anti-patterns
Limites
- Peut ne pas couvrir les fonctionnalités CSS très nouvelles ou expérimentales
- Se concentre sur l'architecture, pas sur la syntaxe CSS de base
- Peut être écrasant pour les débutants
Lors du choix d'une méthodologie CSS ou de la mise en place d'un système de design tokens pour un nouveau projet.
Pour des projets simples avec des besoins CSS minimaux où une seule feuille de style est suffisante.
Analyse de sécurité
SûrThe 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.
Aucun point d'attention détecté
Exemples
Set up a design token system using CSS custom properties with three tiers (global, semantic, component) for a new project.Convert a styled-components project to Vanilla Extract for zero-runtime CSS-in-JS, explaining the migration steps.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
Expert Next.js App Router
Developpement
Un skill qui transforme Claude en expert Next.js App Router.
Générateur de README
Developpement
Crée des README.md professionnels et complets pour vos projets.
Rédacteur de Documentation API
Developpement
Génère de la documentation API complète au format OpenAPI/Swagger.