# angular-development

An Angular skill covering components, services, DI, routing, forms and Signals. Useful when the agent writes Angular and mixes old patterns with new ones.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 461 installs · ★ 62
- Author: manutej
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-frontend-essentials/skills/angular-development/SKILL.md
- Updated: 2026-06-13
- HTML: https://affpapa.org/en/nevibecode/skills/manutej-angular-development

## What it does

The skill lays out current Angular practice: standalone components, dependency injection through `inject()`, reactive forms with validation, routing with lazy loading and guards, state handled by Signals and RxJS. It ships code samples and walks through component lifecycle hooks, HTTP client integrations, custom directives and pipes. Migrating older patterns to modern ones gets its own section.

Everything traces back to the official Angular documentation, wired through Context7 to the `/angular/angular` library. So the agent pulls real API signatures instead of guessing. That matters on a project already running a recent version, where a model tends to reach for `NgModule` and constructor injection anyway.

The skill sets boundaries for the agent; it does not build your app or lint your code. If your project follows its own architecture, say so in the prompt, or you will get the standard Angular layout back.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill angular-development -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill angular-development -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill angular-development -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install manutej/luxor-claude-marketplace angular-development
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill angular-development -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-frontend-essentials/skills/angular-development
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill angular-development -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/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-frontend-essentials/skills/angular-development/SKILL.md

## When to use it
- convert a component to standalone and drop the extra `NgModule`
- swap constructor injection for `inject()` in a service
- add lazy loading to a route with an auth guard
- build a validated form on reactive controls
- move component state onto Signals

## Example prompts
- Create a standalone `user-profile` component with its template and styles
- Rewrite `UserService` to use `inject()` instead of the constructor
- Set up lazy loading for the `admin` route with an auth guard

## Similar
- [angular-di](https://affpapa.org/en/nevibecode/skills/angular-di.md) — skill · 5700 installs
- [angular-new-app](https://affpapa.org/en/nevibecode/skills/angular-new-app.md) — skill · 19300 installs
- [angular-best-practices](https://affpapa.org/en/nevibecode/skills/angular-best-practices.md) — skill · 756 installs
- [angular-tooling](https://affpapa.org/en/nevibecode/skills/angular-tooling.md) — skill · 5200 installs
- [angular-developer](https://affpapa.org/en/nevibecode/skills/affaan-m-angular-developer.md) — skill · 4500 installs
- [angular-migration](https://affpapa.org/en/nevibecode/skills/angular-migration.md) — skill · 10900 installs

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

From the same set: [manutej/luxor-claude-marketplace](https://affpapa.org/en/nevibecode/by/manutej/luxor-claude-marketplace.md) — 65 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