# angular

This skill guides Angular v20+ work with Signals, standalone components, zoneless setup, SSR, and reactive code. Use it for new apps or staged upgrades.

- skill · `type=skill` · Claude Code · 216 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/angular
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/angular

## What it does

The skill is aimed at Angular v20+ projects. It first considers the Angular version and project layout, then guides the agent toward Signals, standalone components, zoneless change detection, SSR, prerendering, and hydration. It also covers reactive design choices.

Its workflow keeps typing and reactivity in view, then asks for a build and test check. Signals fit local state and derived values, while the source assigns HTTP requests and more involved asynchronous flows to RxJS. That distinction helps keep each tool in its intended role.

A project that cannot move to Angular v20+ falls outside this skill’s intended use. AngularJS migrations should use `angular-migration`, and an existing app should be refactored in stages rather than through one large rewrite.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill development/angular
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill angular -a claude-code
```

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

### Codex

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

### Cursor

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates angular
```

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

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/angular
```

### Windsurf (Devin Desktop)

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

### 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/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/angular

## When to use it
- start an Angular v20+ application
- move component state to Signals
- replace NgModules with standalone components
- configure SSR, prerendering, or hydration

## Example prompts
- Build an Angular v20+ profile component with Signals and the standalone API.
- Migrate this Angular feature from NgModules to standalone components without losing types.
- Review this project for zoneless change detection, then validate it with a build and tests.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

## Other versions with the same name
- [angular · mindrally](https://affpapa.org/en/nevibecode/skills/mindrally-angular.md) — 816 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 495 cards

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