Frameworks

Angular components

Writes and reviews Angular 22 components, templates and services - signals, built-in control flow, zoneless and OnPush defaults, SSR and hydration, NgOptimizedImage, router accessibility, DomSanitizer - for fast, accessible apps. Use when editing a .component.ts or .component.html, migrating from *ngIf or NgModules, or asked to review Angular code.

fe-angularangular9 rules78 tokens always loaded, 1152 tokens when used, 2088 tokens in references on demand.

Install

init installs this skill when the project uses angular. Pick your agent to see where its files land.

npx github:dawidolko/frontend-skills init

Not tested yet with this runner. npx and pnpm dlx are tested; if this one fails, use one of them.

Without --agents, init finds the agents from what the project already has, and asks when it finds none:

How init finds each of the 17 agents

Agent	Found by
Claude Code	`CLAUDE.md` `.claude` `CLAUDE.local.md`
OpenAI Codex	`.codex` `AGENTS.override.md`
Cursor	`.cursor` `.cursorrules`
GitHub Copilot	`.github/copilot-instructions.md` `.github/instructions` `.github/skills` `.github/prompts`
Gemini CLI	`GEMINI.md` `.gemini`
Antigravity CLI	`.agents/rules` `.agent/rules`
Devin / Windsurf	`.devin` `.windsurf` `.windsurfrules`
OpenCode	`opencode.json` `opencode.jsonc` `.opencode`
Cline	`.clinerules` `.cline`
Zed	`.rules` `.zed`
JetBrains Junie	`.junie`
Kiro	`.kiro`
Augment	`.augment` `.augment-guidelines`
Trae	`.trae`
Continue	`.continue`
Amazon Q Developer	`.amazonq`
Aider	`.aider.conf.yml` `CONVENTIONS.md`

Where fe-angular lands for Claude Code

.claude/skills/fe-angular/SKILL.mdskill
.claude/skills/fe-angular/references/angular.mdskill
.claude/rules/fe-angular.mdrule file
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.claude/rules/fe-angular.md

---
paths:
  - "**/*.component.ts"
  - "**/*.component.html"
  - "**/*.service.ts"
  - "**/app.config.ts"
  - "**/*.routes.ts"
---

# Angular components (frontend-skills)

Writes and reviews Angular 22 components, templates and services - signals, built-in control flow, zoneless and OnPush defaults, SSR and hydration, NgOptimizedImage, router accessibility, DomSanitizer - for fast, accessible apps. Use when editing a .component.ts or .component.html, migrating from *ngIf or NgModules, or asked to review Angular code.

- Use `@if`, `@for` and `@switch`; `*ngIf`, `*ngFor` and `NgSwitch` are deprecated since v20 (angular/control-flow).
- `@for` tracks a unique field (`track item.id`), not the object (angular/for-track-id).
- Two-way binding is `[(value)]`, never `([value])` (angular/banana-in-box).
- Derive state with `computed()` or `linkedSignal()`; `effect()` only syncs with the outside world (angular/computed-not-effect).
- Change signals with `set()` and `update()` and new values; never mutate their contents.
- Static images use `ngSrc` with `width` and `height` (or `fill`), the LCP image `priority` (angular/ng-optimized-image).
- `routerLinkActive` links set `ariaCurrentWhenActive="page"` (angular/router-aria-current); move focus to the main heading after navigation.
- With SSR, no direct `window`, `document` or `localStorage`; inject `DOCUMENT` or use `afterNextRender()` (angular/ssr-browser-globals).
- Write `<tbody>` in every table (angular/table-tbody).
- Never pass data to `bypassSecurityTrust*`; bind `[innerHTML]` and let Angular sanitize (angular/no-bypass-security-trust).
- Interactive elements are native `<button>` and `<a>`, also as component hosts (`button[appButton]`) (a11y/no-click-on-static).

Before larger changes, read the full skill: `.claude/skills/fe-angular/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-angular lands for OpenAI Codex

.agents/skills/fe-angular/SKILL.mdskill
.agents/skills/fe-angular/references/angular.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenAI Codex has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-angular lands for Cursor

.agents/skills/fe-angular/SKILL.mdskill
.agents/skills/fe-angular/references/angular.mdskill
.cursor/rules/fe-angular.mdcrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.cursor/rules/fe-angular.mdc

---
description: Writes and reviews Angular 22 components, templates and services - signals, built-in control flow, zoneless and OnPush defaults, SSR and hydration, NgOptimizedImage, router accessibility, DomSanitizer - for fast, accessible apps. Use when editing a .component.ts or .component.html, migrating from *ngIf or NgModules, or asked to review Angular code.
globs: **/*.component.ts, **/*.component.html, **/*.service.ts, **/app.config.ts, **/*.routes.ts
alwaysApply: false
---

# Angular components (frontend-skills)

- Use `@if`, `@for` and `@switch`; `*ngIf`, `*ngFor` and `NgSwitch` are deprecated since v20 (angular/control-flow).
- `@for` tracks a unique field (`track item.id`), not the object (angular/for-track-id).
- Two-way binding is `[(value)]`, never `([value])` (angular/banana-in-box).
- Derive state with `computed()` or `linkedSignal()`; `effect()` only syncs with the outside world (angular/computed-not-effect).
- Change signals with `set()` and `update()` and new values; never mutate their contents.
- Static images use `ngSrc` with `width` and `height` (or `fill`), the LCP image `priority` (angular/ng-optimized-image).
- `routerLinkActive` links set `ariaCurrentWhenActive="page"` (angular/router-aria-current); move focus to the main heading after navigation.
- With SSR, no direct `window`, `document` or `localStorage`; inject `DOCUMENT` or use `afterNextRender()` (angular/ssr-browser-globals).
- Write `<tbody>` in every table (angular/table-tbody).
- Never pass data to `bypassSecurityTrust*`; bind `[innerHTML]` and let Angular sanitize (angular/no-bypass-security-trust).
- Interactive elements are native `<button>` and `<a>`, also as component hosts (`button[appButton]`) (a11y/no-click-on-static).

Before larger changes, read the full skill: `.agents/skills/fe-angular/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-angular lands for GitHub Copilot

.agents/skills/fe-angular/SKILL.mdskill
.agents/skills/fe-angular/references/angular.mdskill
.github/instructions/fe-angular.instructions.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.github/instructions/fe-angular.instructions.md

---
applyTo: "**/*.component.ts,**/*.component.html,**/*.service.ts,**/app.config.ts,**/*.routes.ts"
description: "Writes and reviews Angular 22 components, templates and services - signals, built-in control flow, zoneless and OnPush defaults, SSR and hydration, NgOptimizedImage, router accessibility, DomSanitizer - for fast, accessible apps. Use when editing a .component.ts or .component.html, migrating from *ngIf or NgModules, or asked to review Angular code."
---

# Angular components (frontend-skills)

- Use `@if`, `@for` and `@switch`; `*ngIf`, `*ngFor` and `NgSwitch` are deprecated since v20 (angular/control-flow).
- `@for` tracks a unique field (`track item.id`), not the object (angular/for-track-id).
- Two-way binding is `[(value)]`, never `([value])` (angular/banana-in-box).
- Derive state with `computed()` or `linkedSignal()`; `effect()` only syncs with the outside world (angular/computed-not-effect).
- Change signals with `set()` and `update()` and new values; never mutate their contents.
- Static images use `ngSrc` with `width` and `height` (or `fill`), the LCP image `priority` (angular/ng-optimized-image).
- `routerLinkActive` links set `ariaCurrentWhenActive="page"` (angular/router-aria-current); move focus to the main heading after navigation.
- With SSR, no direct `window`, `document` or `localStorage`; inject `DOCUMENT` or use `afterNextRender()` (angular/ssr-browser-globals).
- Write `<tbody>` in every table (angular/table-tbody).
- Never pass data to `bypassSecurityTrust*`; bind `[innerHTML]` and let Angular sanitize (angular/no-bypass-security-trust).
- Interactive elements are native `<button>` and `<a>`, also as component hosts (`button[appButton]`) (a11y/no-click-on-static).

Before larger changes, read the full skill: `.agents/skills/fe-angular/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-angular lands for Gemini CLI

.agents/skills/fe-angular/SKILL.mdskill
.agents/skills/fe-angular/references/angular.mdskill
GEMINI.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Gemini CLI: Gemini CLI was replaced by Antigravity CLI for unpaid tiers on 2026-06-18; choose "antigravity" too if you use it.

Gemini CLI has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

GEMINI.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-angular lands for Antigravity CLI

.agents/skills/fe-angular/SKILL.mdskill
.agents/skills/fe-angular/references/angular.mdskill
.agents/rules/fe-angular.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.agents/rules/fe-angular.md

---
trigger: glob
globs: "**/*.component.ts, **/*.component.html, **/*.service.ts, **/app.config.ts, **/*.routes.ts"
description: "Writes and reviews Angular 22 components, templates and services - signals, built-in control flow, zoneless and OnPush defaults, SSR and hydration, NgOptimizedImage, router accessibility, DomSanitizer - for fast, accessible apps. Use when editing a .component.ts or .component.html, migrating from *ngIf or NgModules, or asked to review Angular code."
---

# Angular components (frontend-skills)

- Use `@if`, `@for` and `@switch`; `*ngIf`, `*ngFor` and `NgSwitch` are deprecated since v20 (angular/control-flow).
- `@for` tracks a unique field (`track item.id`), not the object (angular/for-track-id).
- Two-way binding is `[(value)]`, never `([value])` (angular/banana-in-box).
- Derive state with `computed()` or `linkedSignal()`; `effect()` only syncs with the outside world (angular/computed-not-effect).
- Change signals with `set()` and `update()` and new values; never mutate their contents.
- Static images use `ngSrc` with `width` and `height` (or `fill`), the LCP image `priority` (angular/ng-optimized-image).
- `routerLinkActive` links set `ariaCurrentWhenActive="page"` (angular/router-aria-current); move focus to the main heading after navigation.
- With SSR, no direct `window`, `document` or `localStorage`; inject `DOCUMENT` or use `afterNextRender()` (angular/ssr-browser-globals).
- Write `<tbody>` in every table (angular/table-tbody).
- Never pass data to `bypassSecurityTrust*`; bind `[innerHTML]` and let Angular sanitize (angular/no-bypass-security-trust).
- Interactive elements are native `<button>` and `<a>`, also as component hosts (`button[appButton]`) (a11y/no-click-on-static).

Before larger changes, read the full skill: `.agents/skills/fe-angular/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-angular lands for Devin / Windsurf

.agents/skills/fe-angular/SKILL.mdskill
.agents/skills/fe-angular/references/angular.mdskill
.devin/rules/fe-angular.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Devin / Windsurf: Devin CLI also reads .cursor/rules; with Cursor chosen too, the CLI sees both rule files of a skill.

Planned by the installer itself for the example React project in the repository.

.devin/rules/fe-angular.md

---
trigger: glob
globs: "**/*.component.ts,**/*.component.html,**/*.service.ts,**/app.config.ts,**/*.routes.ts"
---

# Angular components (frontend-skills)

Writes and reviews Angular 22 components, templates and services - signals, built-in control flow, zoneless and OnPush defaults, SSR and hydration, NgOptimizedImage, router accessibility, DomSanitizer - for fast, accessible apps. Use when editing a .component.ts or .component.html, migrating from *ngIf or NgModules, or asked to review Angular code.

- Use `@if`, `@for` and `@switch`; `*ngIf`, `*ngFor` and `NgSwitch` are deprecated since v20 (angular/control-flow).
- `@for` tracks a unique field (`track item.id`), not the object (angular/for-track-id).
- Two-way binding is `[(value)]`, never `([value])` (angular/banana-in-box).
- Derive state with `computed()` or `linkedSignal()`; `effect()` only syncs with the outside world (angular/computed-not-effect).
- Change signals with `set()` and `update()` and new values; never mutate their contents.
- Static images use `ngSrc` with `width` and `height` (or `fill`), the LCP image `priority` (angular/ng-optimized-image).
- `routerLinkActive` links set `ariaCurrentWhenActive="page"` (angular/router-aria-current); move focus to the main heading after navigation.
- With SSR, no direct `window`, `document` or `localStorage`; inject `DOCUMENT` or use `afterNextRender()` (angular/ssr-browser-globals).
- Write `<tbody>` in every table (angular/table-tbody).
- Never pass data to `bypassSecurityTrust*`; bind `[innerHTML]` and let Angular sanitize (angular/no-bypass-security-trust).
- Interactive elements are native `<button>` and `<a>`, also as component hosts (`button[appButton]`) (a11y/no-click-on-static).

Before larger changes, read the full skill: `.agents/skills/fe-angular/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-angular lands for OpenCode

.agents/skills/fe-angular/SKILL.mdskill
.agents/skills/fe-angular/references/angular.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenCode has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-angular lands for Cline

.claude/skills/fe-angular/SKILL.mdskill
.claude/skills/fe-angular/references/angular.mdskill
.clinerules/fe-angular.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Cline: If .clinerules is a single file rather than a folder, Cline rule files are not written; skills still are.

Planned by the installer itself for the example React project in the repository.

.clinerules/fe-angular.md

---
paths:
  - "**/*.component.ts"
  - "**/*.component.html"
  - "**/*.service.ts"
  - "**/app.config.ts"
  - "**/*.routes.ts"
---

# Angular components (frontend-skills)

Writes and reviews Angular 22 components, templates and services - signals, built-in control flow, zoneless and OnPush defaults, SSR and hydration, NgOptimizedImage, router accessibility, DomSanitizer - for fast, accessible apps. Use when editing a .component.ts or .component.html, migrating from *ngIf or NgModules, or asked to review Angular code.

- Use `@if`, `@for` and `@switch`; `*ngIf`, `*ngFor` and `NgSwitch` are deprecated since v20 (angular/control-flow).
- `@for` tracks a unique field (`track item.id`), not the object (angular/for-track-id).
- Two-way binding is `[(value)]`, never `([value])` (angular/banana-in-box).
- Derive state with `computed()` or `linkedSignal()`; `effect()` only syncs with the outside world (angular/computed-not-effect).
- Change signals with `set()` and `update()` and new values; never mutate their contents.
- Static images use `ngSrc` with `width` and `height` (or `fill`), the LCP image `priority` (angular/ng-optimized-image).
- `routerLinkActive` links set `ariaCurrentWhenActive="page"` (angular/router-aria-current); move focus to the main heading after navigation.
- With SSR, no direct `window`, `document` or `localStorage`; inject `DOCUMENT` or use `afterNextRender()` (angular/ssr-browser-globals).
- Write `<tbody>` in every table (angular/table-tbody).
- Never pass data to `bypassSecurityTrust*`; bind `[innerHTML]` and let Angular sanitize (angular/no-bypass-security-trust).
- Interactive elements are native `<button>` and `<a>`, also as component hosts (`button[appButton]`) (a11y/no-click-on-static).

Before larger changes, read the full skill: `.claude/skills/fe-angular/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-angular lands for Zed

.agents/skills/fe-angular/SKILL.mdskill
.agents/skills/fe-angular/references/angular.mdskill
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Zed: Zed reads only the first instruction file of its list; the block is placed in that file.

Zed has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CLAUDE.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-angular lands for JetBrains Junie

.agents/skills/fe-angular/SKILL.mdskill
.agents/skills/fe-angular/references/angular.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

JetBrains Junie: Junie reads .agents/skills only in a trusted project.

JetBrains Junie has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-angular lands for Kiro

.kiro/skills/fe-angular/SKILL.mdskill
.kiro/skills/fe-angular/references/angular.mdskill
.kiro/steering/fe-angular.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.kiro/steering/fe-angular.md

---
inclusion: fileMatch
fileMatchPattern: ["**/*.component.ts", "**/*.component.html", "**/*.service.ts", "**/app.config.ts", "**/*.routes.ts"]
---

# Angular components (frontend-skills)

Writes and reviews Angular 22 components, templates and services - signals, built-in control flow, zoneless and OnPush defaults, SSR and hydration, NgOptimizedImage, router accessibility, DomSanitizer - for fast, accessible apps. Use when editing a .component.ts or .component.html, migrating from *ngIf or NgModules, or asked to review Angular code.

- Use `@if`, `@for` and `@switch`; `*ngIf`, `*ngFor` and `NgSwitch` are deprecated since v20 (angular/control-flow).
- `@for` tracks a unique field (`track item.id`), not the object (angular/for-track-id).
- Two-way binding is `[(value)]`, never `([value])` (angular/banana-in-box).
- Derive state with `computed()` or `linkedSignal()`; `effect()` only syncs with the outside world (angular/computed-not-effect).
- Change signals with `set()` and `update()` and new values; never mutate their contents.
- Static images use `ngSrc` with `width` and `height` (or `fill`), the LCP image `priority` (angular/ng-optimized-image).
- `routerLinkActive` links set `ariaCurrentWhenActive="page"` (angular/router-aria-current); move focus to the main heading after navigation.
- With SSR, no direct `window`, `document` or `localStorage`; inject `DOCUMENT` or use `afterNextRender()` (angular/ssr-browser-globals).
- Write `<tbody>` in every table (angular/table-tbody).
- Never pass data to `bypassSecurityTrust*`; bind `[innerHTML]` and let Angular sanitize (angular/no-bypass-security-trust).
- Interactive elements are native `<button>` and `<a>`, also as component hosts (`button[appButton]`) (a11y/no-click-on-static).

Before larger changes, read the full skill: `.kiro/skills/fe-angular/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-angular lands for Augment

.agents/skills/fe-angular/SKILL.mdskill
.agents/skills/fe-angular/references/angular.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Augment has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-angular lands for Trae

.trae/skills/fe-angular/SKILL.mdskill
.trae/skills/fe-angular/references/angular.mdskill
.trae/rules/fe-angular.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Trae: Trae reads AGENTS.md only after it is enabled in its settings.

Planned by the installer itself for the example React project in the repository.

.trae/rules/fe-angular.md

---
description: "Writes and reviews Angular 22 components, templates and services - signals, built-in control flow, zoneless and OnPush defaults, SSR and hydration, NgOptimizedImage, router accessibility, DomSanitizer - for fast, accessible apps. Use when editing a .component.ts or .component.html, migrating from *ngIf or NgModules, or asked to review Angular code."
globs: **/*.component.ts,**/*.component.html,**/*.service.ts,**/app.config.ts,**/*.routes.ts
alwaysApply: false
---

# Angular components (frontend-skills)

- Use `@if`, `@for` and `@switch`; `*ngIf`, `*ngFor` and `NgSwitch` are deprecated since v20 (angular/control-flow).
- `@for` tracks a unique field (`track item.id`), not the object (angular/for-track-id).
- Two-way binding is `[(value)]`, never `([value])` (angular/banana-in-box).
- Derive state with `computed()` or `linkedSignal()`; `effect()` only syncs with the outside world (angular/computed-not-effect).
- Change signals with `set()` and `update()` and new values; never mutate their contents.
- Static images use `ngSrc` with `width` and `height` (or `fill`), the LCP image `priority` (angular/ng-optimized-image).
- `routerLinkActive` links set `ariaCurrentWhenActive="page"` (angular/router-aria-current); move focus to the main heading after navigation.
- With SSR, no direct `window`, `document` or `localStorage`; inject `DOCUMENT` or use `afterNextRender()` (angular/ssr-browser-globals).
- Write `<tbody>` in every table (angular/table-tbody).
- Never pass data to `bypassSecurityTrust*`; bind `[innerHTML]` and let Angular sanitize (angular/no-bypass-security-trust).
- Interactive elements are native `<button>` and `<a>`, also as component hosts (`button[appButton]`) (a11y/no-click-on-static).

Before larger changes, read the full skill: `.trae/skills/fe-angular/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-angular lands for Continue

.frontend-skills/skills/fe-angular/SKILL.mdskill
.frontend-skills/skills/fe-angular/references/angular.mdskill
.continue/rules/fe-angular.mdrule file

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.continue/rules/fe-angular.md

---
name: "Angular components"
description: "Writes and reviews Angular 22 components, templates and services - signals, built-in control flow, zoneless and OnPush defaults, SSR and hydration, NgOptimizedImage, router accessibility, DomSanitizer - for fast, accessible apps. Use when editing a .component.ts or .component.html, migrating from *ngIf or NgModules, or asked to review Angular code."
globs: ["**/*.component.ts", "**/*.component.html", "**/*.service.ts", "**/app.config.ts", "**/*.routes.ts"]
alwaysApply: false
---

# Angular components (frontend-skills)

- Use `@if`, `@for` and `@switch`; `*ngIf`, `*ngFor` and `NgSwitch` are deprecated since v20 (angular/control-flow).
- `@for` tracks a unique field (`track item.id`), not the object (angular/for-track-id).
- Two-way binding is `[(value)]`, never `([value])` (angular/banana-in-box).
- Derive state with `computed()` or `linkedSignal()`; `effect()` only syncs with the outside world (angular/computed-not-effect).
- Change signals with `set()` and `update()` and new values; never mutate their contents.
- Static images use `ngSrc` with `width` and `height` (or `fill`), the LCP image `priority` (angular/ng-optimized-image).
- `routerLinkActive` links set `ariaCurrentWhenActive="page"` (angular/router-aria-current); move focus to the main heading after navigation.
- With SSR, no direct `window`, `document` or `localStorage`; inject `DOCUMENT` or use `afterNextRender()` (angular/ssr-browser-globals).
- Write `<tbody>` in every table (angular/table-tbody).
- Never pass data to `bypassSecurityTrust*`; bind `[innerHTML]` and let Angular sanitize (angular/no-bypass-security-trust).
- Interactive elements are native `<button>` and `<a>`, also as component hosts (`button[appButton]`) (a11y/no-click-on-static).

Before larger changes, read the full skill: `.frontend-skills/skills/fe-angular/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-angular lands for Amazon Q Developer

.frontend-skills/skills/fe-angular/SKILL.mdskill
.frontend-skills/skills/fe-angular/references/angular.mdskill
.amazonq/rules/frontend-skills.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Amazon Q Developer: Amazon Q Developer IDE plugins reach end of support on 2027-04-30; AWS points to Kiro.

Amazon Q Developer has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

.amazonq/rules/frontend-skills.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-angular` (Angular components): when editing `**/*.component.ts`, `**/*.component.html`, `**/*.service.ts`, `**/app.config.ts`, `**/*.routes.ts`, first read `.frontend-skills/skills/fe-angular/SKILL.md`.

The real file

Where fe-angular lands for Aider

.frontend-skills/skills/fe-angular/SKILL.mdskill
.frontend-skills/skills/fe-angular/references/angular.mdskill
CONVENTIONS.mdinstruction block
.aider.conf.ymlconfig

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Aider has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CONVENTIONS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-angular` (Angular components): when editing `**/*.component.ts`, `**/*.component.html`, `**/*.service.ts`, `**/app.config.ts`, `**/*.routes.ts`, first read `.frontend-skills/skills/fe-angular/SKILL.md`.

The real file

How to use it

Once installed, the agent loads the skill by itself when a task matches its description. You can also ask for it in your own words, for example:

And to check and fix the work:

Use the fe-angular skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain angular/control-flow and fix it here.

Rules it teaches

angular/control-flow
Templates use the built-in @if, @for and @switch blocks, not the *ngIf, *ngFor and *ngSwitch directives deprecated in v20.
minorstatic
angular/for-track-id
An @for block tracks a stable unique field of the item (track item.id), not the item object itself.
moderatestatic
angular/ng-optimized-image
Static images in Angular templates use NgOptimizedImage (ngSrc with width and height, or fill), not a plain src.
moderatestatic
angular/router-aria-current
A routerLinkActive link also sets ariaCurrentWhenActive, so the current page is announced, not only styled.
moderatestaticWCAG 1.3.1
angular/table-tbody
Table rows in Angular templates sit inside an explicit tbody (or thead/tfoot); the browser inserts one and hydration fails.
moderatestatic
angular/banana-in-box
Two-way binding is written [(prop)], brackets outside; ([prop]) silently binds an event named [prop] instead.
moderatestatic
angular/computed-not-effect
Derive state with computed() (or linkedSignal()); never copy one signal into another inside effect().
moderatemanual
angular/ssr-browser-globals
Code that runs on the server never touches window, document, navigator or localStorage directly; use DI or afterNextRender.
seriousmanual
angular/no-bypass-security-trust
DomSanitizer bypassSecurityTrust* calls never receive user or server data; each one is a reviewed exception.
seriousmanual

The rule digest

This part is copied into each agent's scoped rule file, so it stands on its own:

Use @if, @for and @switch; *ngIf, *ngFor and NgSwitch are deprecated since v20 (angular/control-flow).
@for tracks a unique field (track item.id), not the object (angular/for-track-id).
Two-way binding is [(value)], never ([value]) (angular/banana-in-box).
Derive state with computed() or linkedSignal(); effect() only syncs with the outside world (angular/computed-not-effect).
Change signals with set() and update() and new values; never mutate their contents.
Static images use ngSrc with width and height (or fill), the LCP image priority (angular/ng-optimized-image).
routerLinkActive links set ariaCurrentWhenActive="page" (angular/router-aria-current); move focus to the main heading after navigation.
With SSR, no direct window, document or localStorage; inject DOCUMENT or use afterNextRender() (angular/ssr-browser-globals).
Write <tbody> in every table (angular/table-tbody).
Never pass data to bypassSecurityTrust*; bind [innerHTML] and let Angular sanitize (angular/no-bypass-security-trust).
Interactive elements are native <button> and <a>, also as component hosts (button[appButton]) (a11y/no-click-on-static).

Steps the agent follows

Read the @angular/core major from package.json. On v20+ components are standalone by default, on v21+ zoneless, on v22+ OnPush: do not write standalone: true or changeDetection: OnPush in new code.
Components: input(), input.required(), output(), model() instead of @Input/@Output; inject() instead of constructor parameters; host: {} instead of @HostBinding/@HostListener; [class.x] and [style.x] instead of NgClass/NgStyle.
State: a service holds a private signal() and exposes asReadonly() and computed() views. Reads with httpResource() or resource(); writes with HttpClient methods.
Routes lazy-load features with loadComponent and loadChildren. Below-the-fold widgets go in @defer (on viewport) with a sized @placeholder; never defer what is visible on first paint.
SSR: declare RenderMode per route in app.routes.server.ts; never prerender per-user pages; keep auth requests out of the transfer cache.
Accessibility: the CDK (cdkTrapFocus, LiveAnnouncer, FocusMonitor) or @angular/aria for widgets instead of hand-written keyboard code.

How the agent checks the work

npx github:dawidolko/frontend-skills audit --changed reads *.component.html templates: deprecated directives, identity tracking, plain <img src>, missing ariaCurrentWhenActive, rows without <tbody>, reversed two-way bindings. Inline templates in .ts files are not read yet; review them by hand.
Run ng lint with angular-eslint (template accessibility rules, prefer-control-flow, no-uncalled-signals) and ng build; in development watch the console for hydration (NG05xx) and image warnings.
Search .ts files for effect(, bypassSecurityTrust and, with SSR, window., document. and localStorage.

Checked by the audit

The static checks of these rules run in audit; this is a real session on the example project:

Terminal recording: audit lists findings by severity with rule ids and file:line, and fails at serious. — `audit`: counts by severity, each rule with its first location, the exit code.

Reference files

references/angular.md2088 tokens

SKILL.md on GitHub