Frontend Skills
English

Frameworki

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 regułładowane zawsze: 78 tokenów; przy użyciu: 1152 tokeny; w referencjach na żądanie: 2088 tokenów.

Instalacja

init instaluje ten skill, gdy projekt używa: angular. Wybierz agenta, aby zobaczyć, gdzie trafią jego pliki.

Agent
npx github:dawidolko/frontend-skills init

Bez --agents polecenie init rozpoznaje agentów po tym, co projekt już ma, a gdy nie znajdzie żadnego, pyta:

Po czym init rozpoznaje każdego z agentów (17)
AgentRozpoznawany po
Claude CodeCLAUDE.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 CLIGEMINI.md .gemini
Antigravity CLI.agents/rules .agent/rules
Devin / Windsurf.devin .windsurf .windsurfrules
OpenCodeopencode.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

Gdzie trafia fe-angular dla: Claude Code

  • .claude/skills/fe-angular/SKILL.mdskill
  • .claude/skills/fe-angular/references/angular.mdskill
  • .claude/rules/fe-angular.mdplik reguł
  • CLAUDE.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-angular dla: OpenAI Codex

  • .agents/skills/fe-angular/SKILL.mdskill
  • .agents/skills/fe-angular/references/angular.mdskill
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

OpenAI Codex nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.
Prawdziwy plik

Gdzie trafia fe-angular dla: Cursor

  • .agents/skills/fe-angular/SKILL.mdskill
  • .agents/skills/fe-angular/references/angular.mdskill
  • .cursor/rules/fe-angular.mdcplik reguł
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-angular dla: GitHub Copilot

  • .agents/skills/fe-angular/SKILL.mdskill
  • .agents/skills/fe-angular/references/angular.mdskill
  • .github/instructions/fe-angular.instructions.mdplik reguł
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-angular dla: Gemini CLI

  • .agents/skills/fe-angular/SKILL.mdskill
  • .agents/skills/fe-angular/references/angular.mdskill
  • GEMINI.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .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 nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.
Prawdziwy plik

Gdzie trafia fe-angular dla: Antigravity CLI

  • .agents/skills/fe-angular/SKILL.mdskill
  • .agents/skills/fe-angular/references/angular.mdskill
  • .agents/rules/fe-angular.mdplik reguł
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-angular dla: Devin / Windsurf

  • .agents/skills/fe-angular/SKILL.mdskill
  • .agents/skills/fe-angular/references/angular.mdskill
  • .devin/rules/fe-angular.mdplik reguł
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .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.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-angular dla: OpenCode

  • .agents/skills/fe-angular/SKILL.mdskill
  • .agents/skills/fe-angular/references/angular.mdskill
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

OpenCode nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.
Prawdziwy plik

Gdzie trafia fe-angular dla: Cline

  • .claude/skills/fe-angular/SKILL.mdskill
  • .claude/skills/fe-angular/references/angular.mdskill
  • .clinerules/fe-angular.mdplik reguł
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-angular dla: Zed

  • .agents/skills/fe-angular/SKILL.mdskill
  • .agents/skills/fe-angular/references/angular.mdskill
  • CLAUDE.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zed nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.
Prawdziwy plik

Gdzie trafia fe-angular dla: JetBrains Junie

  • .agents/skills/fe-angular/SKILL.mdskill
  • .agents/skills/fe-angular/references/angular.mdskill
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

JetBrains Junie nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.
Prawdziwy plik

Gdzie trafia fe-angular dla: Kiro

  • .kiro/skills/fe-angular/SKILL.mdskill
  • .kiro/skills/fe-angular/references/angular.mdskill
  • .kiro/steering/fe-angular.mdplik reguł
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-angular dla: Augment

  • .agents/skills/fe-angular/SKILL.mdskill
  • .agents/skills/fe-angular/references/angular.mdskill
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Augment nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.
Prawdziwy plik

Gdzie trafia fe-angular dla: Trae

  • .trae/skills/fe-angular/SKILL.mdskill
  • .trae/skills/fe-angular/references/angular.mdskill
  • .trae/rules/fe-angular.mdplik reguł
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-angular dla: Continue

  • .frontend-skills/skills/fe-angular/SKILL.mdskill
  • .frontend-skills/skills/fe-angular/references/angular.mdskill
  • .continue/rules/fe-angular.mdplik reguł

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-angular dla: Amazon Q Developer

  • .frontend-skills/skills/fe-angular/SKILL.mdskill
  • .frontend-skills/skills/fe-angular/references/angular.mdskill
  • .amazonq/rules/frontend-skills.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .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 nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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`.
Prawdziwy plik

Gdzie trafia fe-angular dla: Aider

  • .frontend-skills/skills/fe-angular/SKILL.mdskill
  • .frontend-skills/skills/fe-angular/references/angular.mdskill
  • CONVENTIONS.mdblok instrukcji
  • .aider.conf.ymlkonfiguracja

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Aider nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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`.
Prawdziwy plik

Jak go używać

Po instalacji agent sam ładuje skill, gdy zadanie pasuje do jego opisu. Możesz też poprosić o niego własnymi słowami, na przykład:

A żeby sprawdzić i poprawić pracę:

  • Użyj skilla fe-angular na tym pliku.
  • Uruchom audyt front-endu na moich zmianach i popraw wszystko, co poważne.
  • Wyjaśnij angular/control-flow i popraw to tutaj.

Reguły, których uczy

  • angular/control-flow

    Templates use the built-in @if, @for and @switch blocks, not the *ngIf, *ngFor and *ngSwitch directives deprecated in v20.

    drobnastatyczne

  • angular/for-track-id

    An @for block tracks a stable unique field of the item (track item.id), not the item object itself.

    umiarkowanastatyczne

  • angular/ng-optimized-image

    Static images in Angular templates use NgOptimizedImage (ngSrc with width and height, or fill), not a plain src.

    umiarkowanastatyczne

  • angular/router-aria-current

    A routerLinkActive link also sets ariaCurrentWhenActive, so the current page is announced, not only styled.

    umiarkowanastatyczneWCAG 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.

    umiarkowanastatyczne

  • angular/banana-in-box

    Two-way binding is written [(prop)], brackets outside; ([prop]) silently binds an event named [prop] instead.

    umiarkowanastatyczne

  • angular/computed-not-effect

    Derive state with computed() (or linkedSignal()); never copy one signal into another inside effect().

    umiarkowanaręczne

  • angular/ssr-browser-globals

    Code that runs on the server never touches window, document, navigator or localStorage directly; use DI or afterNextRender.

    poważnaręczne

  • angular/no-bypass-security-trust

    DomSanitizer bypassSecurityTrust* calls never receive user or server data; each one is a reviewed exception.

    poważnaręczne

Skrót reguł

Ta część jest kopiowana do zawężonego pliku reguł każdego agenta, więc musi być zrozumiała sama w sobie:

  • 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).

Kroki, które wykonuje agent

  1. 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.
  2. 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.
  3. State: a service holds a private signal() and exposes asReadonly() and computed() views. Reads with httpResource() or resource(); writes with HttpClient methods.
  4. 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.
  5. SSR: declare RenderMode per route in app.routes.server.ts; never prerender per-user pages; keep auth requests out of the transfer cache.
  6. Accessibility: the CDK (cdkTrapFocus, LiveAnnouncer, FocusMonitor) or @angular/aria for widgets instead of hand-written keyboard code.

Jak agent sprawdza swoją pracę

  • 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.

Sprawdzane audytem

Testy statyczne tych reguł działają w audit; to prawdziwa sesja na przykładowym projekcie:

Nagranie terminala: audit wypisuje znaleziska według wagi z identyfikatorami reguł i miejscem plik:linia i kończy się błędem od progu serious.
audit: liczby według wagi, każda reguła z pierwszym miejscem, kod wyjścia.

Pliki referencyjne

SKILL.md na GitHubie