Help us improve
Share bugs, ideas, or general feedback.
Generates Angular code and provides architectural guidance for projects, components, services, signals, forms, DI, routing, SSR, accessibility, animations, styling, testing, and CLI tooling.
npx claudepluginhub affaan-m/ecc --plugin eccHow this skill is triggered — by the user, by Claude, or both
Slash command
/everything-claude-code:angular-developerThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
- Working in any Angular project or codebase
references/angular-animations.mdreferences/angular-aria.mdreferences/cli.mdreferences/component-harnesses.mdreferences/component-styling.mdreferences/components.mdreferences/creating-services.mdreferences/data-resolvers.mdreferences/define-routes.mdreferences/defining-providers.mdreferences/di-fundamentals.mdreferences/e2e-testing.mdreferences/effects.mdreferences/hierarchical-injectors.mdreferences/host-elements.mdreferences/injection-context.mdreferences/inputs.mdreferences/linked-signal.mdreferences/loading-strategies.mdreferences/mcp.mdProvides expert Angular/TypeScript patterns for standalone components, signals, RxJS, NgRx state management, smart/dumb components, and performance.
Provides expertise for modern Angular v20+ apps using Signals, Standalone Components, Zoneless change detection, SSR/Hydration, and reactive patterns. Ideal for new builds and performance optimization.
Provides Angular 14+ expertise for standalone components, signals, RxJS patterns, NgRx state management, dependency injection, lazy loading routes, OnPush change detection, and testing.
Share bugs, ideas, or general feedback.
linkedSignal, or resourceAlways 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.
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.
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.
If no guidelines are provided by the user, use these defaults when creating a new Angular project:
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.
npx.npx @angular/cli@<requested_version> new <project-name>Step 2: Check for an existing Angular installation.
ng version in the terminal to check if the Angular CLI is already installed on the system.ng new <project-name>Step 3: Fallback to Latest.
ng version command fails (indicating no Angular installation exists), you must use npx to fetch the latest version.npx @angular/cli@latest new <project-name>When working with Angular components, consult the following references based on the task:
If you require deeper documentation not found in the references above, read the documentation at https://angular.dev/guide/components.
When managing state and data reactivity, use Angular Signals and consult the following references:
signal, computed), reactive contexts, and untracked. Read signals-overview.mdlinkedSignal): Creating writable state linked to source signals. Read linked-signal.mdresource): Fetching asynchronous data directly into signal state. Read resource.mdeffect): Logging, third-party DOM manipulation (afterRenderEffect), and when NOT to use effects. Read effects.mdIn 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
Template-driven forms: Use for simple forms. Read template-driven-forms.md
Reactive forms: Use for complex forms. Read reactive-forms.md
When implementing dependency injection in Angular, follow these guidelines:
inject() function. Read di-fundamentals.mdprovidedIn: 'root' option, and injecting into components or other services. Read creating-services.mdInjectionToken, useClass, useValue, useFactory, and scopes. Read defining-providers.mdinject() is allowed, runInInjectionContext, and assertInInjectionContext. Read injection-context.mdEnvironmentInjector vs ElementInjector, resolution rules, modifiers (optional, skipSelf), and providers vs viewProviders. Read hierarchical-injectors.mdWhen building accessible custom components for any of the following patterns: Accordion, Listbox, Combobox, Menu, Tabs, Toolbar, Tree, Grid, consult the following reference:
When implementing navigation in Angular, consult the following references:
<router-outlet>, nested outlets, and named outlets. Read show-routes-with-outlets.mdRouterLink and programmatic navigation with Router. Read navigate-to-routes.mdCanActivate, CanMatch, and other guards for security. Read route-guards.mdResolveFn. Read data-resolvers.mdIf you require deeper documentation or more context, visit the official Angular Routing guide.
When implementing styling and animations in Angular, consult the following references:
When writing or updating tests, consult the following references based on the task:
TestBed. Read testing-fundamentals.mdRouterTestingHarness for reliable navigation tests. Read router-testing.mdWhen working with Angular tooling, consult the following references:
null or undefined as initial signal form field values — use '', 0, or [] insteadform.field.valid() — use form.field().valid()min, max, value, disabled, or readonly HTML attributes on [formField] inputs — define these as schema rules insteadinject() outside an injection context — use runInInjectionContext when neededeffect() for derived state that should use computed()$parent.$index in nested @for loops — Angular does not support $parent; use let outerIdx = $index insteadtdd-workflow — test-driven development workflow applicable to Angular components and servicessecurity-review — security checklist for web applications including Angular-specific concernsfrontend-patterns — general frontend patterns for context on React/Next.js approaches