How to add skills in Angular

In my Angular CLI MCP server post I wired an assistant into the CLI so it could ask real questions about your project. Agent Skills solve the other half of the problem. Where the MCP server gives the assistant live tools, skills give it standing domain expertise — a curated set of Angular instructions it loads before it writes a single line.

Angular Agent Skills are specialized, domain-specific instruction packs maintained by the Angular team. They carry the framework’s current conventions — Signals, modern reactivity, project structure, best practices — and are kept in sync with the framework itself. Hand them to an AI agent and it stops generating the Angular it half-remembers from training data and starts generating the Angular you’re actually on.

The two official skills

The Angular team ships its skills from one repo — github.com/angular/skills:

Skill	What it does
`angular-developer`	Generates Angular code and gives architectural guidance — components, services, reactivity (`signal`, `linkedSignal`, `resource`), forms, dependency injection, routing, SSR, ARIA, animations, styling, testing, and CLI tooling.
`angular-new-app`	Scaffolds a brand-new Angular app via the CLI, with guidelines for structuring a modern project correctly from the start.

A skill activates per task: when the work matches, the agent loads that skill’s instructions and resources, then acts on them.

Prerequisites

An agent that supports skills — Gemini CLI, Antigravity, Claude Code, and others.
Node with npx available, so you can pull the skills from the Angular repo.

No changes to your package.json and nothing to install into the app itself — skills live with your agent, not your project’s dependencies.

Step 1 — Add the skills

The simplest path is the community tool skills.sh, which installs skills from any Git repo. Point it at the Angular repo:

npx skills add https://github.com/angular/skills

That pulls both official skills — angular-developer and angular-new-app — into your agent’s skills location in one shot.

Step 2 — Per-agent notes

How a skill is surfaced depends on the agent. The mechanics differ, the skills are identical.

Gemini CLI has native skills support — see the Gemini CLI skills docs for where it looks them up and how it activates them.
Antigravity likewise reads skills natively — see the Antigravity skills docs.
Other agents — if your tool supports skills, follow its own skills documentation for the install location; the npx skills add command above handles most of them, and the underlying skill files are the same regardless of tool.

If your agent doesn’t support skills yet, you can still get Angular-aware output by generating instruction files with the CLI (ng generate ai-config) — covered at the end of the MCP server post.

Step 3 — Activate and verify

Skills earn their keep on real tasks. Once they’re installed, just describe the work and let the agent pick the matching skill:

“Scaffold a new Angular app for a blog using the angular-new-app skill.”

“Use the angular-developer skill to add a signals-based CartService with a total computed from the items.”

You’ll know the skill fired when the output tracks current Angular — standalone components, signal and computed, the @if/@for control-flow blocks, inject() for DI — instead of legacy NgModule boilerplate and constructor injection. If you still get stale patterns, confirm the skill actually installed where your agent expects it and that the task wording matched the skill’s purpose.

Skills and MCP together

These two features are complementary, not competing:

MCP server — live tools. The assistant queries your workspace, searches the current docs, and runs migrations against your real files.
Agent Skills — standing expertise. The assistant carries Angular’s conventions into every relevant task before it even reaches for a tool.

Run both. The MCP server keeps the assistant honest about your project; skills keep it honest about Angular.

Wrap-up

That’s the whole loop: install with npx skills add https://github.com/angular/skills, let your agent surface the two official skills, then activate them by describing the task. The result is an assistant that writes modern, idiomatic Angular by default. Full details live in the official Angular Agent Skills docs.