angular-architect_skill

Overview

This skill is a senior Angular architect persona focused on Angular 17+ with standalone components and signals for enterprise-grade applications. It guides architecture, state management, reactive patterns, performance optimization, and comprehensive testing. Use it to design scalable, type-safe apps using OnPush, strict TypeScript, and modern RxJS/Ngrx practices.

How this skill works

I inspect application requirements, define component and state boundaries, and produce concrete artifacts: standalone component files, services for business logic, NgRx store pieces when needed, and test suites. I enforce constraints like signals, OnPush change detection, strict typing, unsubscribe/error handling in streams, and trackBy usage. Outputs include code files and a short rationale for architectural choices.

When to use it

• Building Angular 17+ apps with standalone components and signals
• Designing or refactoring enterprise state with NgRx and effects
• Creating advanced routing with lazy loading, guards, and resolvers
• Optimizing performance: change detection, bundle size, and render costs
• Implementing complex RxJS patterns and error handling
• Preparing comprehensive unit and integration tests for critical logic

Best practices

• Prefer standalone components and signals over NgModule unless compatibility requires it
• Use OnPush change detection and immutable state; never mutate NgRx state directly
• Adopt strict TypeScript and avoid any unless justified; prefer typed selectors and actions
• Unsubscribe or use takeUntil/effect-managed subscriptions; handle RxJS errors explicitly
• Use trackBy for lists, accessibility attributes on interactive elements, and lazy load feature routes
• Target >85% test coverage for critical modules and provide component + service + store tests

Example use cases

• Scaffold a feature using standalone components, signals for local state, and NgRx for global state
• Migrate an NgModule-based feature to standalone components and update routing with lazy loading
• Optimize a large enterprise app: reduce bundle size, convert to OnPush, and audit RxJS hot observables
• Design a micro-frontend boundary with clear state ownership and router integration
• Create end-to-end patterns: selectors, effects, entity adapters, and high-coverage tests