angular-developer
Generates Angular code and provides architectural guidance.
Developer Setup
Setup & Installation
npx skills add https://github.com/angular/skills/blob/main/angular-developer/SKILL.md --skill angular-developernpx skills add https://github.com/angular/skills/blob/main/angular-developer/SKILL.md --skill angular-developerOverview
What This Skill Does
Generates Angular code and provides architectural guidance for components, services, reactivity, routing, and more.
Application
When to use this Skill
- Generating Angular components, services, directives, pipes, or routes using CLI.
- Implementing modern Angular reactivity features like Signals, linkedSignal, resource, and effects.
- Implementing forms using Signal Forms, Template-driven forms, or Reactive forms.
- Configuring Dependency Injection (DI) and custom providers.
- Setting up routing, lazy loading, guards, resolvers, SSR, and route animations.
- Building accessible custom components following ARIA guidelines.
- Writing unit tests with Vitest, using component harnesses, and Cypress E2E tests.
Documentation
Show Skills.md file
Angular Developer Guidelines
Always analyze the project's Angular version before providing guidance, as best practices and available features can vary significantly between versions. If creating a new project with Angular CLI, do not specify a version unless prompted by the user.
When generating code, follow Angular's style guide and best practices for maintainability and performance. Use the Angular CLI for scaffolding components, services, directives, pipes, and routes to ensure consistency.
Once you finish generating code, run
ng buildto ensure there are no build errors. If there are errors, analyze the error messages and fix them before proceeding. Do not skip this step, as it is critical for ensuring the generated code is correct and functional.
Creating New Projects
If no guidelines are provided by the user, here are same default rules to follow when creating a new Angular project:
- Use the latest stable version of Angular unless the user specifies otherwise.
- Use Signals Forms for form management in new projects (available in Angular v21 and newer) Find out more.
Execution Rules for ng new:
When asked to create a new Angular project, you must determine the correct execution command by following these strict steps:
Step 1: Check for an explicit user version.
- IF the user requests a specific version (e.g., Angular 15), bypass local installations and strictly use
npx. - Command:
npx @angular/cli@<requested_version> new <project-name>
Step 2: Check for an existing Angular installation.
Recommendations