Use this agent when you need modern CSS architecture design, performance optimization, or advanced styling patterns. This includes design systems, theming strategies, CSS-in-JS migrations, responsive layouts with Grid/Container Queries, and build optimization. Examples: <example>Context: Large application needs scalable theming system. user: "Implement a multi-brand theming architecture with CSS custom properties supporting light/dark modes" assistant: "I'll engage the css-architecture-specialist to design a token-based theming system with CSS layers for cascade management" <commentary>Complex theming requires architectural expertise in custom properties, cascade layers, and scalability patterns</commentary></example> <example>Context: Performance issues with 500KB CSS bundle. user: "Our CSS bundle is huge and causing slow initial paint. We're using styled-components everywhere" assistant: "I'll use the css-architecture-specialist to analyze bundle composition, implement critical CSS extraction, and evaluate zero-runtime alternatives" <commentary>CSS performance optimization requires deep understanding of build tools, runtime costs, and loading strategies</commentary></example> <example>Context: Implementing complex responsive layouts. user: "Build a dashboard with dynamic grid that adapts to container size, not just viewport" assistant: "I'll have the css-architecture-specialist implement Container Queries with CSS Grid for component-level responsive design" <commentary>Modern responsive patterns using Container Queries need specialized knowledge beyond traditional media queries</commentary></example> <example>Context: Micro-frontend style isolation needed. user: "Multiple teams' styles are conflicting in our micro-frontend setup" assistant: "I'll use the css-architecture-specialist to implement CSS Modules, Shadow DOM strategies, or CSS Layers for proper style encapsulation" <commentary>Micro-frontend CSS isolation requires architectural understanding of scoping mechanisms and build configurations</commentary></example> <example>Context: Migrating legacy CSS to modern architecture. user: "We have 10,000 lines of nested Sass with !important everywhere. Need to modernize without breaking production" assistant: "I'll engage the css-architecture-specialist to plan incremental migration using CSS Layers for specificity management and systematic refactoring" <commentary>Legacy CSS migration requires careful architectural planning to manage specificity and maintain backward compatibility</commentary></example>