# angular-best-practices

Keeps your agent inside Angular 21 conventions: signals, standalone components, reactive forms. Useful when it keeps reaching for outdated syntax.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 756 installs · ★ 21
- Author: Boise-State-Development
- License: LicenseRef-Unknown · policy=link-only · description only; the file stays with the author
- Source: https://github.com/Boise-State-Development/agentcore-public-stack/tree/HEAD/.claude/skills/angualar-best-practices/SKILL.md
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/angular-best-practices

## What it does

The skill is a rulebook for Angular work. It covers TypeScript with strict checking and no `any`, components built on `input()` and `output()`, signal-based state, native control flow in templates, services via `inject()`, and lazy-loaded routes. There are sections on `resource()` for async data, file naming, `ng-icon` setup, `NgOptimizedImage`, and Tailwind 4.1 for styling.

Some rules are blunt. You do not set `standalone: true` because it has been the default since v20, and `@HostBinding`/`@HostListener` are out in favour of the `host` object in the decorator. Complex derived state points to `references/signal-patterns.md`, so if that file is not next to the skill, the agent never reads it.

Accessibility is part of the deal: AXE checks and WCAG AA minimums for focus, contrast and ARIA. Expect the agent to touch markup, not just logic. The skill installs into Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode through the same `npx skills add` command.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add Boise-State-Development/agentcore-public-stack --skill angular-best-practices -a claude-code
```
```bash
npx skills add Boise-State-Development/agentcore-public-stack --skill angualar-best-practices -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/angualar-best-practices/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/angualar-best-practices/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add Boise-State-Development/agentcore-public-stack --skill angualar-best-practices -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/angualar-best-practices/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add Boise-State-Development/agentcore-public-stack --skill angualar-best-practices -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/angualar-best-practices/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Boise-State-Development/agentcore-public-stack angualar-best-practices
```

2. **Manually: put the files in place**
- File: `.github/skills/angualar-best-practices/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add Boise-State-Development/agentcore-public-stack --skill angualar-best-practices -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/Boise-State-Development/agentcore-public-stack --path .claude/skills/angualar-best-practices
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/angualar-best-practices/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add Boise-State-Development/agentcore-public-stack --skill angualar-best-practices -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/Boise-State-Development/agentcore-public-stack/tree/HEAD/.claude/skills/angualar-best-practices/SKILL.md

## When to use it
- write Angular 21 components without legacy decorators
- move component state onto signals and `computed()`
- swap `*ngIf` and `*ngFor` for `@if` and `@for`
- set up lazy feature routes with `loadComponent`
- bring a template up to WCAG AA minimums

## Example prompts
- create a standalone task-list component using signals and ChangeDetectionStrategy.OnPush
- rewrite this service with inject() and providedIn: 'root'
- add lazy loading for the admin route with loadComponent

## Similar
- [angular-developer](https://affpapa.org/en/nevibecode/skills/affaan-m-angular-developer.md) — skill · 4500 installs
- [angular-signals](https://affpapa.org/en/nevibecode/skills/angular-signals.md) — skill · 8800 installs
- [angular-component](https://affpapa.org/en/nevibecode/skills/angular-component.md) — skill · 11500 installs
- [angular-new-app](https://affpapa.org/en/nevibecode/skills/angular-new-app.md) — skill · 19200 installs
- [angular-development](https://affpapa.org/en/nevibecode/skills/angular-development.md) — skill · 705 installs
- [angular-migration](https://affpapa.org/en/nevibecode/skills/angular-migration.md) — skill · 10900 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md