Guide · Agent skill
How to use the Angular Developer Guidelines agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The angular-developer skill is a set of instructions that tells an AI agent how to work on Angular projects: check the project's Angular version first, scaffold code with the Angular CLI, and follow current conventions for signals, forms, routing, dependency injection, SSR, accessibility, animations and testing. After this guide you will know what the skill changes about the agent's behaviour, how to install it from the ZIP, how to ask for Angular work so the skill triggers, and what to check before trusting the output.
Angular Developer Guidelinesaffaan-m/ECC · MIT Download the skill Quick start
- 1Download and unzip. Download the skill ZIP from this page and unzip it so the folder contains SKILL.md.
- 2Place the skill folder. Put it in ~/.claude/skills/ for all projects, or in .claude/skills/ inside one Angular project. Alternatively, upload it under Settings → Capabilities → Skills in the Claude apps.
- 3Check your tools. Confirm Node.js and npm are installed and that ng version works, or that npx can reach @angular/cli.
- 4Make an Angular request. Describe the Angular task in plain language, mentioning Angular and the feature you need.
- 5Let the agent check the version. The agent should analyse the project's Angular version before it gives advice or generates code.
- 6Confirm the build. Make sure the agent runs ng build after generating code and fixes any errors it reports.
- 7Review the output. Read the generated code and run your own tests before merging it.
What the skill makes the agent do
Without the skill, an agent writes Angular code from whatever it remembers. With the skill, the agent is told to analyse the project's Angular version before giving advice, because best practices and available features differ between versions. It is also told to scaffold components, services, directives, pipes and routes with the Angular CLI rather than writing every file by hand.
The skill's most important rule is that after generating code the agent must run ng build and fix any errors it reports before moving on. The skill says this step must not be skipped.
- Checks the project's Angular version before advising
- Scaffolds with the Angular CLI for consistency
- Runs ng build after code generation and fixes errors
- Prefers signal forms for new applications when the version supports them
- Points to topic reference files for components, signals, forms, DI, routing, styling and testing
Install the skill from the ZIP
Download the ZIP for this skill from this page and unzip it. The skill's main file is SKILL.md. Place the unzipped skill folder in one of two locations: your personal skills folder ~/.claude/skills/, which makes it available across your projects, or a project-specific .claude/skills/ folder inside the project, which makes it available only there.
If you use the Claude apps instead, you can upload the skill under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/
- Project only: .claude/skills/ inside your Angular project
- Claude apps: Settings → Capabilities → Skills, then upload
Trigger the skill with natural requests
You do not need a special command. The skill describes the situations it applies to, so ask for Angular work in plain language. Mention Angular and the task. The skill covers creating a project, generating components or services, reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility, animations, styling, testing and CLI tool authoring.
Mentioning the Angular version you use helps, since the skill asks the agent to check it first anyway.
- "In this Angular project, add a service that loads products and exposes them as a signal."
- "Create a new Angular app for a team blog. Pick a sensible ng new command."
- "Add a lazy-loaded admin route with a guard to this Angular app."
- "Build an accessible tabs component in Angular."
What the agent needs on your machine
The skill expects the Angular CLI (the ng command) or npx access to @angular/cli, plus Node.js and npm. These are needed to run ng new and ng build. You also need an existing Angular project or permission to create one.
To create a project, the skill has the agent follow a fixed order. If you request a specific version, it uses npx @angular/cli@<requested_version> new <project-name>. If you do not, it runs ng version first; if that succeeds it uses ng new <project-name>, and if it fails it falls back to npx @angular/cli@latest new <project-name>.
- Node.js and npm
- Angular CLI (ng) or npx access to @angular/cli
- An existing Angular project, or permission to create one
npx @angular/cli@<requested_version> new <project-name>Safety notes: scripts and network access
This skill runs scripts and uses the network. The commands it runs include ng version, ng new, npx @angular/cli and ng build, and npx may download the Angular CLI. Read the commands the agent proposes and confirm that the project and target version are what you intend before allowing them to run.
The skill's guidance is only as good as the agent's execution. The reference files it links to are not included in the material this page was based on, so review generated code and do not rely on the skill alone for production decisions.
- Review each ng new command, especially the project name and location
- Check the generated code with your own review and tests
- Do not treat the skill as a substitute for code review
Tips for better results
Tell the agent your Angular version if you know it, and say when you want a specific version. Ask it to run the build and show the result so you can see that the ng build step happened. For forms, say whether your app already uses reactive or template-driven forms, because the skill asks the agent to match an existing form strategy rather than switch.
The skill also lists anti-patterns the agent should avoid, such as using effect() for derived state where computed() fits, calling inject() outside an injection context, and setting min, max or disabled HTML attributes on [formField] inputs.
- State your Angular version and whether the project already exists
- Ask for the build to be run and reported
- Name your existing form approach for older projects
What people use it for
- Adding a signal-based service and components to an existing Angular app
- Scaffolding a new Angular project with a sensible ng new command
- Setting up lazy-loaded routes with guards and resolvers
- Building accessible custom widgets such as tabs or comboboxes with Angular Aria guidance
- Writing unit or component harness tests for Angular components
Frequently asked questions
Is the Angular Developer Guidelines skill free?
The source material for this page is published under the MIT licence. The skill itself is a SKILL.md file and a set of guidelines, and this page does not list any price.
What do I need to run the angular-developer skill?
You need the Angular CLI (ng) or npx access to @angular/cli, plus Node.js and npm. You also need an existing Angular project or permission to create one, since the skill runs ng new and ng build.
Where do I install the angular-developer skill?
Unzip the downloaded ZIP and place the folder in ~/.claude/skills/ for personal use, or in .claude/skills/ inside a project. In the Claude apps you can upload it under Settings → Capabilities → Skills.
Why does the skill ask the agent to check the Angular version first?
Best practices and available features differ a lot between Angular versions. The skill asks the agent to analyse the project version before giving guidance, so it does not suggest APIs that the project cannot use, such as signal-based APIs in older versions.
Does this skill work with React or Vue?
No. The guidance is specific to Angular, so it is not intended for projects that use other front-end frameworks.
Why are the reference files mentioned but not included?
The skill links to reference files such as signals-overview.md and signal-forms.md, but those files were not included in the material this page is based on. The skill's advice is therefore only as good as the agent's execution, so review its output carefully.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you build or maintain an Angular application and want an agent to follow current Angular conventions, run the CLI and check its own build. Pick something else if your project uses React, Vue or an older Angular version without signal-based APIs, or if you need a reviewed reference for production decisions.
Download the skill