Angular Developer
## what it does
tl;dr: this is the Angular team’s house-style procedure, not a generic “write me some Angular” prompt. The SKILL.md (10,735 bytes, 17 reference files) tells the agent to read the project’s Angular version first, then point at the right ./references/*.md per task (components, signals, forms, routing, DI, ARIA, animations, styling, testing, CLI). Tailwind and the bundled Angular MCP server (ng mcp) are first-class citizens; ng build is the gate before “done.”
What it actually does
The SKILL.md fetched on 2026-09-10 from angular/skills/main/angular-developer/SKILL.md runs the agent through a topic-routing pattern, not a single algorithm. The flow:
Global rules (apply to every turn)
- Analyze the project’s Angular version before providing guidance — best practices and available features vary significantly between versions. When creating a new project, do not pin a version unless the user asks.
- Follow Angular’s style guide. Use the Angular CLI to scaffold components, services, directives, pipes, routes — do not hand-roll.
- After generating code, run
ng build. Fix errors before reporting “done.” The skill explicitly bans skipping this step.
Topic routing (read the matching references/*.md)
The skill is a directory of pointers. Each topic has a reference file the agent loads on demand:
| Topic | Reference | When to read |
|---|---|---|
Components (anatomy, @if / @for / @switch, self-closing tags) | references/components.md | Any component task |
Signal-based input() / output() / model() | references/inputs.md, references/outputs.md | New component bindings |
| Host bindings, attribute injection | references/host-elements.md | Custom host behavior |
| v20+ “Intent over Role” naming | references/naming-conventions.md | File / class / selector names |
signal, computed, untracked | references/signals-overview.md | Reactivity basics |
linkedSignal (writable state linked to source) | references/linked-signal.md | Derived writable state |
resource / async data → signal | references/resource.md | Async data without RxJS |
effect, afterRenderEffect, when not to use effects | references/effects.md | Side effects in signal contexts |
provideHttpClient, interceptors, httpResource | references/http-client.md | Backend communication |
| Signal Forms (v22+ stable) | references/signal-forms.md | New forms in v22+ projects |
| Template-driven forms (simple) | references/template-driven-forms.md | Legacy / simple forms |
| Reactive forms (complex) | references/reactive-forms.md | Legacy / complex forms |
DI fundamentals, inject(), services | references/di-fundamentals.md, references/creating-services.md | Wiring services |
InjectionToken, useClass / useValue / useFactory, scopes | references/defining-providers.md | Custom providers |
runInInjectionContext, assertInInjectionContext | references/injection-context.md | DI outside constructors |
EnvironmentInjector vs ElementInjector, modifiers | references/hierarchical-injectors.md | Multi-injector trees |
| Built-in / custom pipes, template vs TS reuse | references/pipes.md | Formatting |
| Angular Aria headless components (Accordion, Listbox, Combobox, Menu, Tabs, Toolbar, Tree, Grid) | references/angular-aria.md | Accessible custom UI |
| Routing: define / load / outlet / navigate / guards / resolvers / lifecycle / rendering / animations | references/define-routes.md, references/loading-strategies.md, references/show-routes-with-outlets.md, references/navigate-to-routes.md, references/route-guards.md, references/data-resolvers.md, references/router-lifecycle.md, references/rendering-strategies.md, references/route-animations.md | Any routing task |
| Tailwind CSS integration | references/tailwind-css.md | Tailwind setup |
| Native CSS animations (recommended) vs legacy DSL | references/angular-animations.md | Animations |
| Component styles + encapsulation | references/component-styling.md | Styling |
Vitest / TestBed, Component Harnesses, RouterTestingHarness, E2E | references/testing-fundamentals.md, references/component-harnesses.md, references/router-testing.md, references/e2e-testing.md | Tests |
| Angular CLI / migrations / MCP / environment config | references/cli.md, references/migrations.md, references/mcp.md, references/environment-configuration.md | Tooling |
Forms decision rule (verbatim from SKILL.md)
In most cases for new apps, prefer signal forms. When making a forms decision, analyze the project and consider the following guidelines: if the application is using v22 or newer and this is a new form, prefer Signal Forms. For older applications or when working with existing forms, use the appropriate form type that matches the applications current form strategy.
Angular MCP server (first-class)
The skill calls out ng mcp and the get_best_practices tool as the source of truth for Angular best practices when available. The README of the Angular skills repo reinforces: “best practices available for building outstanding Angular applications via the MCP server that is bundled with the Angular CLI.”
Install
From the angular/skills README fetched 2026-09-10:
# Interactive wizard — picks angular-developer from the angular/skills repo
npx skills add https://github.com/angular/skillsManual (per-repo clone, single skill copy):
git clone https://github.com/angular/skills
# Claude Code — global
cp -r angular-developer ~/.claude/skills/angular-developer
# Claude Code — project-scoped
mkdir -p .claude/skills && cp -r angular-developer .claude/skills/angular-developer
# Cursor
mkdir -p .cursor/skills && cp -r angular-developer .cursor/skills/angular-developerThe angular-developer/ folder ships with its own references/ subdirectory of 17 topic files; copy the whole folder, not just SKILL.md. Without the references the skill collapses to a one-page checklist with no lookup path.
The README explicitly notes that contributions go upstream: “If you would like to contribute to the skills, please make the updates directly in angular/angular repository.”
Gotchas
- Tailwind setup lives in the repo, not the skill body.
references/tailwind-css.mdis a separate file. If the host can’t reach./references/, the Tailwind guidance is gone. httpResource≠HttpClientwith.subscribe. The skill treatsresource/httpResourceas the modern path and points atreferences/resource.md+references/http-client.md. Agents that fall back to RxJS in a v22+ signal project are usually missing the skill, not ignoring it.- Forms choice is version-sensitive. Signal Forms are stable in v22+. The skill is explicit: don’t pick Signal Forms for an existing app on v20 just because the model is newer.
- Effects are overused.
references/effects.mdincludes a “when NOT to use effects” section. If the agent reaches foreffect()to bridge two signals, it’s probably acomputed()orlinkedSignal()instead. - Naming v20+ is “Intent over Role”.
UserProfileComponentnotUserProfile. The skill points atreferences/naming-conventions.md; an agent that producesUserCardComponentin a v20+ project has not loaded it. - Angular Aria is opinionated about the eight patterns. Accordion, Listbox, Combobox, Menu, Tabs, Toolbar, Tree, Grid. For anything else, the skill sends the agent to
https://angular.dev/guide/components. - Skill-vs-
ng newoverlap. The companionangular-new-appskill handles project creation;angular-developeris for ongoing development on an existing project. Loading both for a fresh scaffold is fine but redundant. sandbox_testuntested — we read theSKILL.mdand the references index, we did not run an Angular code-generation task in the sandbox. The static scan isreview, notblock: onlyangular.dev/guide/*URLs are flagged as non-docs (the skill itself points the agent at them).
Related: Frontend Design (general UI skills — pair when the Angular code you ship needs design polish), Microsoft Frontend Design Review (review-pattern skill from a different framework — useful contrast for Angular reviews), Vercel React Best Practices (framework-specific house-style skill — React flavor of what this one does for Angular).
## compatibility
## embed this badge
