angular▌

NEVER trigger reflows/repaints in lifecycle hooks (ngOnInit, ngAfterViewInit).

"Scope determines structure" - Where a component lives depends on its usage.

Always analyze the project's Angular version before providing guidance, as best practices and available features can vary significantly between versions. If creating a new project with Angular CLI, do not specify a version unless prompted by the user.

Build standalone Angular v20+ components with signals, OnPush detection, and modern control flow. \n \n Signal-based inputs and outputs replace traditional @Input and @Output decorators, with support for required inputs, defaults, transforms, and computed values \n Host bindings configured via the host object enable dynamic class/style/attribute binding and event listeners without decorator syntax \n Native control flow ( @if , @for , @switch ) replaces structural directives; direct class and st

Server-side rendering, hydration, and prerendering for Angular v20+ applications. \n \n Three render modes: Prerender for static build-time HTML, Server for dynamic per-request SSR, and Client for SPA-only routes \n Incremental hydration with @defer blocks supporting viewport, interaction, idle, and conditional triggers; event replay captures user input before hydration completes \n Platform detection utilities and afterNextRender / afterRender hooks safely isolate browser-only code from server

NgRx state management rules for global state with actions, reducers, effects, and selectors. Use with the core angular-best-practices skill for comprehensive Angular coverage.

Angular Material and CDK rules for component usage, theming, and testing. Use with the core angular-best-practices skill for comprehensive Angular coverage.

Comprehensive style guide for performant, maintainable Angular 17+ applications using signals and modern APIs. \n \n Covers TypeScript strictness, standalone components with OnPush detection, signal-based reactivity with input() , output() , and computed() , and control flow syntax ( @if , @for , @switch ) \n Includes RxJS patterns, performance optimization (route resolvers, lazy loading, @defer ), testing with component harnesses, and architecture guidelines \n Optional library-specific add-ons

Signal-based reactive forms for Angular v21+ with automatic two-way binding and schema-based validation. \n \n Provides type-safe form creation using writable signals as the single source of truth, with automatic field state management for validation, interaction, and availability \n Includes built-in validators (required, email, min, max, pattern) plus custom, cross-field, and async HTTP validation with conditional logic \n Supports dynamic arrays, nested objects, hidden/disabled/readonly field

Angular CLI and development tools for v20+ project setup, code generation, building, testing, and configuration. \n \n Covers project creation, component/service/directive/pipe generation, and schematic-based code scaffolding with inline templates and change detection options \n Includes development server configuration, production builds with budgets and hashing, and bundle analysis via stats-json output \n Supports unit and e2e testing, linting with auto-fix, and environment-based file replace