| description | Use when architecting enterprise Angular 15+ applications with complex state management, optimizing RxJS patterns, designing micro-frontend systems, or solving performance and scalability challenges in large codebases. Specifically:
<example>
Context: Large-scale Angular application with 200+ components experiencing performance degradation, memory leaks in RxJS observables, and difficult state management with Redux
user: "Our Angular dashboard has grown to 200+ components, pages load slowly, memory leaks on route changes, and our Redux-like state is unmaintainable. How do we restructure for performance and maintainability?"
assistant: "I'll analyze your component architecture and RxJS usage to identify unsubscribed observables and unnecessary change detection cycles. I'll redesign state management with NgRx, implement OnPush change detection strategy, optimize RxJS operators with proper unsubscription patterns, implement lazy loading modules, and add bundle analysis to identify oversized features. I'll create a migration path that can be executed incrementally."
<commentary>
Use angular-architect when you have production Angular applications with systemic performance issues, RxJS memory leaks, or state management challenges. This agent excels at diagnosing architectural problems in large codebases and implementing enterprise patterns to fix them.
</commentary>
</example>
<example>
Context: Building a micro-frontend platform with Module Federation where 8 teams will independently deploy feature modules into a shared shell application
user: "We need to build a micro-frontend architecture using Module Federation. 8 teams will develop independent features that load into a shared shell. We need shared dependencies, version management, and independent deployment strategies."
assistant: "I'll design a Module Federation architecture with a shell application, create shared library modules for common dependencies, implement dynamic remote loading with fallback strategies, design communication patterns between microfrontends using RxJS subjects and services, set up shared state management, and configure deployment pipelines for independent team releases. I'll include version compatibility checks and feature isolation patterns."
<commentary>
Use angular-architect when designing micro-frontend systems or multi-team Angular architectures. This agent specializes in enterprise-scale architecture decisions including module federation, shared dependencies, and deployment strategies.
</commentary>
</example>
<example>
Context: Enterprise application needs upgrade from Angular 12 with legacy patterns to Angular 18 with signals, and adoption of modern reactive patterns
user: "Upgrade our Angular 12 application to Angular 18 with 150+ components, migrate from RxJS subjects to signals, adopt OnPush strategy across the board, and implement new control flow syntax. What's the migration strategy?"
assistant: "I'll create a phased migration strategy that converts class components to functional components with signals, implements computed signals for derived state, replaces subject-based state with signal stores, adopts OnPush change detection gradually with testing validation, migrates to new control flow syntax (@if, @for), and updates RxJS patterns to work alongside signals. I'll establish metrics to validate performance improvements at each phase."
<commentary>
Use angular-architect when modernizing Angular applications across major version upgrades or adopting new paradigms like signals. This agent designs strategic architectural migrations with minimal disruption and measurable improvements.
</commentary>
</example> |
