What it isAlways-on coding rules. GitHub Copilot applies them to files matching **/*.component.ts,**/*.component.html,**/*.service.ts,**/*.directive.ts,**/*.pipe.ts,**/*.routes.ts; the Claude Code version is a path-scoped rule generated from the same file. Why use instructions →
Install
This repository (recommended)
Adds .github/instructions/angular.instructions.md — commit it so everyone's Copilot follows the same rules.
Nothing to invoke — edit a matching file and Copilot picks the rules up. Adjust applyTo if your repository layout differs.
This repository (recommended)
Adds .claude/rules/angular.md — commit it. Claude loads it when it reads a matching file.
npx -y github:AGCO-Global/org-skills add instructions angular --tool claude
Just for me, every repository
Save it in your user profile instead.
npx -y github:AGCO-Global/org-skills add instructions angular --tool claude --user
Use it
Nothing to invoke. Adjust the paths globs if your repository layout differs.
Commands run in your repository folder and need Node.js 20+. They use your normal git sign-in to GitHub, so they work while the repository is private. Run npx -y github:AGCO-Global/org-skills list to see everything available.
Settings
name: "Angular"
description: "Always-on rules for writing modern Angular components, services, directives, pipes and routes."
applyTo: "**/*.component.ts,**/*.component.html,**/*.service.ts,**/*.directive.ts,**/*.pipe.ts,**/*.routes.ts"
Instructions Copilot follows
Angular rules
Write new code in the modern style (standalone, signals, inject()) even when older NgModule code sits alongside it.
Components
Use standalone components with ChangeDetectionStrategy.OnPush always. Fewer checks, predictable rendering.
Use input(), input.required(), output() and model(); never @Input()/@Output() in new code.
Use inject() in field initializers; keep the constructor empty. No ngOnInit for work a field initializer or computed() can do.
Split smart and presentational: pages inject services and stores; everything else takes inputs and emits outputs.
Use viewChild()/contentChild() signal queries instead of decorators.
Put host bindings in host: {}, not @HostBinding/@HostListener.
Keep components under about 200 lines; extract a child component or service beyond that.
Signals and RxJS
Hold state in signal(), derive with computed(); never store a derived value in a field.
Update signals immutably (items.update(l => [...l, x])). Mutating in place does not notify.
Use effect() only for side effects (storage, logging, third-party DOM); never write signals inside it. Use computed() or linkedSignal().
Use RxJS at the edges (HTTP, events, debouncing) and convert with toSignal() for templates.
Never nest subscribe() calls; compose with switchMap, concatMap or exhaustMap and pick one deliberately.
Clean up manual subscriptions with takeUntilDestroyed(). Prevents memory leaks.
Templates
Use @if, @for and @switch; always give @for a track on a stable id and an @empty branch.
Keep logic out of templates: no method calls or complex expressions; read signals or computed() values.
Use @defer for heavy, below-the-fold or interaction-gated content.
Render loading, empty, error and success branches explicitly.
Use semantic HTML or Angular Material/CDK; never a div (click). Keyboard and screen-reader users need real controls.
Never bind untrusted HTML with [innerHTML] from user data, and never call bypassSecurityTrust* on it. Prevents XSS.
Services, HTTP and routing
Provide services with providedIn: 'root' unless they must be scoped to a route or component.
Make HTTP calls in services, typed with response interfaces; components never call HttpClient directly.
Handle auth headers, errors and retries in functional interceptors, not in each call.
Lazy load feature routes with loadComponent/loadChildren; use functional guards and resolvers.
Bind route params with withComponentInputBinding() instead of subscribing to ActivatedRoute.
Use typed reactive forms (FormControl<string>, nonNullable); no template-driven forms for complex input.
Never put secrets in environment.ts; it ships to the browser.
Types and tests
Keep strict and strictTemplates on; no any, no ! to silence errors.
Test through the rendered DOM with component harnesses or Testing Library; mock HTTP with provideHttpClientTesting().
Go deeper: for larger tasks use the angular-development, angular-architecture, angular-testing and angular-performance skills, and frontend-code-review before opening a pull request.
---
name: "Angular"
description: "Always-on rules for writing modern Angular components, services, directives, pipes and routes."
applyTo: "**/*.component.ts,**/*.component.html,**/*.service.ts,**/*.directive.ts,**/*.pipe.ts,**/*.routes.ts"
---
# Angular rules
Write new code in the modern style (standalone, signals, `inject()`) even when older NgModule code sits alongside it.
## Components
- Use standalone components with `ChangeDetectionStrategy.OnPush` always. Fewer checks, predictable rendering.
- Use `input()`, `input.required()`, `output()` and `model()`; never `@Input()`/`@Output()` in new code.
- Use `inject()` in field initializers; keep the constructor empty. No `ngOnInit` for work a field initializer or `computed()` can do.
- Split smart and presentational: pages inject services and stores; everything else takes inputs and emits outputs.
- Use `viewChild()`/`contentChild()` signal queries instead of decorators.
- Put host bindings in `host: {}`, not `@HostBinding`/`@HostListener`.
- Keep components under about 200 lines; extract a child component or service beyond that.
## Signals and RxJS
- Hold state in `signal()`, derive with `computed()`; never store a derived value in a field.
- Update signals immutably (`items.update(l => [...l, x])`). Mutating in place does not notify.
- Use `effect()` only for side effects (storage, logging, third-party DOM); never write signals inside it. Use `computed()` or `linkedSignal()`.
- Use RxJS at the edges (HTTP, events, debouncing) and convert with `toSignal()` for templates.
- Never nest `subscribe()` calls; compose with `switchMap`, `concatMap` or `exhaustMap` and pick one deliberately.
- Clean up manual subscriptions with `takeUntilDestroyed()`. Prevents memory leaks.
## Templates
- Use `@if`, `@for` and `@switch`; always give `@for` a `track` on a stable id and an `@empty` branch.
- Keep logic out of templates: no method calls or complex expressions; read signals or `computed()` values.
- Use `@defer` for heavy, below-the-fold or interaction-gated content.
- Render loading, empty, error and success branches explicitly.
- Use semantic HTML or Angular Material/CDK; never a `div (click)`. Keyboard and screen-reader users need real controls.
- Never bind untrusted HTML with `[innerHTML]` from user data, and never call `bypassSecurityTrust*` on it. Prevents XSS.
## Services, HTTP and routing
- Provide services with `providedIn: 'root'` unless they must be scoped to a route or component.
- Make HTTP calls in services, typed with response interfaces; components never call `HttpClient` directly.
- Handle auth headers, errors and retries in functional interceptors, not in each call.
- Lazy load feature routes with `loadComponent`/`loadChildren`; use functional guards and resolvers.
- Bind route params with `withComponentInputBinding()` instead of subscribing to `ActivatedRoute`.
- Use typed reactive forms (`FormControl<string>`, `nonNullable`); no template-driven forms for complex input.
- Never put secrets in `environment.ts`; it ships to the browser.
## Types and tests
- Keep `strict` and `strictTemplates` on; no `any`, no `!` to silence errors.
- Test through the rendered DOM with component harnesses or Testing Library; mock HTTP with `provideHttpClientTesting()`.
Go deeper: for larger tasks use the angular-development, angular-architecture, angular-testing and angular-performance skills, and frontend-code-review before opening a pull request.
---
paths:
- "**/*.component.ts"
- "**/*.component.html"
- "**/*.service.ts"
- "**/*.directive.ts"
- "**/*.pipe.ts"
- "**/*.routes.ts"
---
<!-- Angular — generated from instructions/frontend/angular/angular.instructions.md for Claude Code. Edit that file, not this one. -->
# Angular rules
Write new code in the modern style (standalone, signals, `inject()`) even when older NgModule code sits alongside it.
## Components
- Use standalone components with `ChangeDetectionStrategy.OnPush` always. Fewer checks, predictable rendering.
- Use `input()`, `input.required()`, `output()` and `model()`; never `@Input()`/`@Output()` in new code.
- Use `inject()` in field initializers; keep the constructor empty. No `ngOnInit` for work a field initializer or `computed()` can do.
- Split smart and presentational: pages inject services and stores; everything else takes inputs and emits outputs.
- Use `viewChild()`/`contentChild()` signal queries instead of decorators.
- Put host bindings in `host: {}`, not `@HostBinding`/`@HostListener`.
- Keep components under about 200 lines; extract a child component or service beyond that.
## Signals and RxJS
- Hold state in `signal()`, derive with `computed()`; never store a derived value in a field.
- Update signals immutably (`items.update(l => [...l, x])`). Mutating in place does not notify.
- Use `effect()` only for side effects (storage, logging, third-party DOM); never write signals inside it. Use `computed()` or `linkedSignal()`.
- Use RxJS at the edges (HTTP, events, debouncing) and convert with `toSignal()` for templates.
- Never nest `subscribe()` calls; compose with `switchMap`, `concatMap` or `exhaustMap` and pick one deliberately.
- Clean up manual subscriptions with `takeUntilDestroyed()`. Prevents memory leaks.
## Templates
- Use `@if`, `@for` and `@switch`; always give `@for` a `track` on a stable id and an `@empty` branch.
- Keep logic out of templates: no method calls or complex expressions; read signals or `computed()` values.
- Use `@defer` for heavy, below-the-fold or interaction-gated content.
- Render loading, empty, error and success branches explicitly.
- Use semantic HTML or Angular Material/CDK; never a `div (click)`. Keyboard and screen-reader users need real controls.
- Never bind untrusted HTML with `[innerHTML]` from user data, and never call `bypassSecurityTrust*` on it. Prevents XSS.
## Services, HTTP and routing
- Provide services with `providedIn: 'root'` unless they must be scoped to a route or component.
- Make HTTP calls in services, typed with response interfaces; components never call `HttpClient` directly.
- Handle auth headers, errors and retries in functional interceptors, not in each call.
- Lazy load feature routes with `loadComponent`/`loadChildren`; use functional guards and resolvers.
- Bind route params with `withComponentInputBinding()` instead of subscribing to `ActivatedRoute`.
- Use typed reactive forms (`FormControl<string>`, `nonNullable`); no template-driven forms for complex input.
- Never put secrets in `environment.ts`; it ships to the browser.
## Types and tests
- Keep `strict` and `strictTemplates` on; no `any`, no `!` to silence errors.
- Test through the rendered DOM with component harnesses or Testing Library; mock HTTP with `provideHttpClientTesting()`.
Go deeper: for larger tasks use the angular-development, angular-architecture, angular-testing and angular-performance skills, and frontend-code-review before opening a pull request.