Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind

Angular Developer Guidelines When to Activate Working in any Angular project or codebase Creating or scaffolding a new Angular project, application, or library Generating components, services, directives, pipes, guards, or resolvers Implementing reactivity with Angular Signals, linkedSignal , or resource Working with Angular forms (signal forms, reactive forms, or template driven) Setting up dependency injection, routing, lazy loading, or route guards Adding accessibility (ARIA), animations, or component styling Writing or debugging Angular specific tests (unit, component harness, E2E) Configuring Angular CLI tooling or the Angular MCP server 1. 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. 2. When generating code, follow Angular's style guide and best practices for maintainability and performance. Use the Angular CLI for scaffolding components, services, directives, pipes, and routes to ensure consistency. 3. Once you finish generating code, run ng build to ensure there are no build errors. If there are errors, analyze the error messages and fix them before proceeding. Do not skip this step, as it is critical for ensuring the generated code is correct and functional. Creating New Projects If no guidelines are provided by the user, use these defaults when creating a new Angular project: 1. Use the latest stable version of Angular unless the user specifies otherwise. 2. Prefer Signal Forms for new projects only when the target Angular version supports them. [Find out more](references/signal forms.md). Execution Rules for ng new : When asked to create a new Angular project, you must determine the correct execution command by following these strict steps: Step 1: Check for an explicit user version. IF the user requests a specific version (e.g., Angular 15), bypass local installations and strictly use npx . Command: npx @angular/cli@<requested version new <project name Step 2: Check for an existing Angular installation. IF no specific version is requested, run ng version in the terminal to check if the Angular CLI is already installed on the system. IF the command succeeds and returns an installed version, use the local/global installation directly. Command: ng new <project name Step 3: Fallback to Latest. IF no specific version is requested AND the ng version command fails (indicating no Angular installation exists), you must use npx to fetch the latest version. Command: npx @angular/cli@latest new <project name Components When working with Angular components, consult the following references based on the task: Fundamentals : Anatomy, metadata, core concepts, and template control flow (@if, @for, @switch). Read [components.md](references/components.md) Inputs : Signal based inputs, transforms, and model inputs. Read [inputs.md](references/inputs.md) Outputs : Signal based outputs and custom event best practices. Read [outputs.md](references/outputs.md) Host Elements : Host bindings and attribute injection. Read [host elements.md](references/host elements.md) If you require deeper documentation not found in the references above, read the documentation at https://angular.dev/guide/components . Reactivity and Data Management When managing state and data reactivity, use Angular Signals and consult the following references: Signals Overview : Core signal concepts ( signal , computed ), reactive contexts, and untracked . Read [signals overview.md](references/signals overview.md) Dependent State ( linkedSignal ) : Creating writable state linked to source signals. Read [linked signal.md](references/linked signal.md) Async Reactivity ( resource ) : Fetching asynchronous data directly into signal state. Read [resource.md](references/resource.md) Side Effects ( effect ) : Logging, third party DOM manipulation ( afterRenderEffect ), and when NOT to use effects. Read [effects.md](references/effects.md) Forms In most cases for new apps, prefer signal forms . When making a forms decision, analyze the project and consider the following guidelines: If the application version supports Signal Forms and this is a new form, prefer signal forms . For older applications or existing forms, match the application's current form strategy. Signal Forms : Use signals for form state management. Read [signal forms.md](references/signal forms.md) Template driven forms : Use for simple forms. Read [template driven forms.md](references/template driven forms.md) Reactive forms : Use for complex forms. Read [reactive forms.md](references/reactive forms.md) Dependency Injection When implementing dependency injection in Angular, follow these guidelines: Fundamentals : Overview of Dependency Injection, services, and the inject() function. Read [di fundamentals.md](references/di fundamentals.md) Creating and Using Services : Creating services, the providedIn: 'root' option, and injecting into components or other services. Read [creating services.md](references/creating services.md) Defining Dependency Providers : Automatic vs manual provision, InjectionToken , useClass , useValue , useFactory , and scopes. Read [defining providers.md](references/defining providers.md) Injection Context : Where inject() is allowed, runInInjectionContext , and assertInInjectionContext . Read [injection context.md](references/injection context.md) Hierarchical Injectors : The EnvironmentInjector vs ElementInjector , resolution rules, modifiers ( optional , skipSelf ), and providers vs viewProviders . Read [hierarchical injectors.md](references/hierarchical injectors.md) Angular Aria When building accessible custom components for any of the following patterns: Accordion, Listbox, Combobox, Menu, Tabs, Toolbar, Tree, Grid, consult the following reference: Angular Aria Components : Building headless, accessible components (Accordion, Listbox, Combobox, Menu, Tabs, Toolbar, Tree, Grid) and styling ARIA attributes. Read [angular aria.md](references/angular aria.md) Routing When implementing navigation in Angular, consult the following references: Define Routes : URL paths, static vs dynamic segments, wildcards, and redirects. Read [define routes.md](references/define routes.md) Route Loading Strategies : Eager vs lazy loading, and context aware loading. Read [loading strategies.md](references/loading strategies.md) Show Routes with Outlets : Using <router outlet , nested outlets, and named outlets. Read [show routes with outlets.md](references/show routes with outlets.md) Navigate to Routes : Declarative navigation with RouterLink and programmatic navigation with Router . Read [navigate to routes.md](references/navigate to routes.md) Control Route Access with Guards : Implementing CanActivate , CanMatch , and other guards for security. Read [route guards.md](references/route guards.md) Data Resolvers : Pre fetching data before route activation with ResolveFn . Read [data resolvers.md](references/data resolvers.md) Router Lifecycle and Events : Chronological order of navigation events and debugging. Read [router lifecycle.md](references/router lifecycle.md) Rendering Strategies : CSR, SSG (Prerendering), and SSR with hydration. Read [rendering strategies.md](references/rendering strategies.md) Route Transition Animations : Enabling and customizing the View Transitions API. Read [route animations.md](references/route animations.md) If you require deeper documentation or more context, visit the [official Angular Routing guide](https://angular.dev/guide/routing). Styling and Animations When implementing styling and animations in Angular, consult the following references: Using Tailwind CSS with Angular : Integrating Tailwind CSS into Angular projects. Read [tailwind css.md](references/tailwind css.md) Angular Animations : Using native CSS (recommended) or the legacy DSL for dynamic effects. Read [angular animations.md](references/angular animations.md) Styling components : Best practices for component styles and encapsulation. Read [component styling.md](references/component styling.md) Testing When writing or updating tests, consult the following references based on the task: Fundamentals : Best practices for unit testing, async patterns, and TestBed . Read [testing fundamentals.md](references/testing fundamentals.md) Component Harnesses : Standard patterns for robust component interaction. Read [component harnesses.md](references/component harnesses.md) Router Testing : Using RouterTestingHarness for reliable navigation tests. Read [router testing.md](references/router testing.md) End to End (E2E) Testing : Best practices for E2E tests with Cypress or Playwright. Read [e2e testing.md](references/e2e testing.md) Tooling When working with Angular tooling, consult the following references: Angular CLI : Creating applications, generating code (components, routes, services), serving, and building. Read [cli.md](references/cli.md) Angular MCP Server : Available tools, configuration, and experimental features. Read [mcp.md](references/mcp.md) Anti Patterns Using null or undefined as initial signal form field values — use '' , 0 , or [] instead Accessing form field state flags without calling the field first: form.field.valid() — use form.field().valid() Starting new forms with older form APIs when the target Angular version supports Signal Forms Setting min , max , value , disabled , or readonly HTML attributes on [formField] inputs — define these as schema rules instead Calling inject() outside an injection context — use runInInjectionContext when needed Using effect() for derived state that should use computed() Referencing $parent.$index in nested @for loops — Angular does not support $parent ; use let outerIdx = $index instead Related Skills tdd workflow — test driven development workflow applicable to Angular components and services security review — security checklist for web applications including Angular specific concerns frontend patterns — general frontend patterns for context on React/Next.js approaches

angular-developer