Skip to content

Commit 5bb5542

Browse files
committed
docs: update angular developer skill and document migrations
Update the MCP documentation to reflect the removal of find_examples and modernize tools from the server. Add a new file documenting automatic migrations as the preferred alternative.
1 parent 4c9afb6 commit 5bb5542

3 files changed

Lines changed: 41 additions & 12 deletions

File tree

skills/dev-skills/angular-developer/SKILL.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,4 +126,5 @@ When writing or updating tests, consult the following references based on the ta
126126
When working with Angular tooling, consult the following references:
127127

128128
- **Angular CLI**: Creating applications, generating code (components, routes, services), serving, and building. Read [cli.md](references/cli.md)
129+
- **Code Modernization**: Automatically refactoring to modern standards using migrations. Read [migrations.md](references/migrations.md)
129130
- **Angular MCP Server**: Available tools, configuration, and experimental features. Read [mcp.md](references/mcp.md)

skills/dev-skills/angular-developer/references/mcp.md

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Angular CLI MCP Server
22

3-
The Angular CLI includes a Model Context Protocol (MCP) server that enables AI assistants (like Cursor, Gemini CLI, JetBrains AI, etc.) to interact directly with the Angular CLI. It provides tools for code generation, modernizing code, fetching examples, and running builds/tests.
3+
The Angular CLI includes a Model Context Protocol (MCP) server that enables AI assistants (like Cursor, Gemini CLI, JetBrains AI, etc.) to interact directly with the Angular CLI. It provides tools for project analysis, guided migrations, and running builds/tests.
44

55
## Available Tools (Default)
66

@@ -9,7 +9,6 @@ When the MCP server is enabled, AI agents have access to the following tools:
99
| Name | Description |
1010
| :-------------------------- | :-------------------------------------------------------------------------------------------------------- |
1111
| `ai_tutor` | Launches an interactive AI-powered Angular tutor. |
12-
| `find_examples` | Finds authoritative, best-practice code examples for modern Angular features. |
1312
| `get_best_practices` | Retrieves the Angular Best Practices Guide (crucial for standalone components, typed forms, etc.). |
1413
| `list_projects` | Lists all applications and libraries in the workspace by reading `angular.json`. |
1514
| `onpush_zoneless_migration` | Analyzes code and provides a plan to migrate it to `OnPush` change detection (prerequisite for zoneless). |
@@ -19,15 +18,14 @@ When the MCP server is enabled, AI agents have access to the following tools:
1918

2019
Some tools must be enabled explicitly using the `--experimental-tool` (or `-E`) flag.
2120

22-
| Name | Description |
23-
| :------------------------- | :----------------------------------------------------------------------- |
24-
| `build` | Performs a one-off build using `ng build`. |
25-
| `devserver.start` | Asynchronously starts a dev server (`ng serve`). Returns immediately. |
26-
| `devserver.stop` | Stops the dev server. |
27-
| `devserver.wait_for_build` | Returns the logs of the most recent build in a running dev server. |
28-
| `e2e` | Executes end-to-end tests. |
29-
| `modernize` | Performs code migrations to align with latest best practices and syntax. |
30-
| `test` | Runs the project's unit tests. |
21+
| Name | Description |
22+
| :------------------------- | :-------------------------------------------------------------------- |
23+
| `build` | Performs a one-off build using `ng build`. |
24+
| `devserver.start` | Asynchronously starts a dev server (`ng serve`). Returns immediately. |
25+
| `devserver.stop` | Stops the dev server. |
26+
| `devserver.wait_for_build` | Returns the logs of the most recent build in a running dev server. |
27+
| `e2e` | Executes end-to-end tests. |
28+
| `test` | Runs the project's unit tests. |
3129

3230
## Configuration
3331

@@ -104,5 +102,5 @@ You can pass arguments to the MCP server in the `args` array of your configurati
104102
Example for read-only mode with experimental tools enabled:
105103

106104
```json
107-
"args": ["-y", "@angular/cli", "mcp", "--read-only", "-E", "build", "-E", "modernize"]
105+
"args": ["-y", "@angular/cli", "mcp", "--read-only", "-E", "build", "-E", "test"]
108106
```
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Automatic Migrations & Code Modernization
2+
3+
When tasked with refactoring or modernizing an existing codebase, always prefer using the official automated schematics available in `@angular/core` over manual text replacement.
4+
5+
## Discovering Migrations
6+
7+
To view all available schematics for the installed version of the core framework, run:
8+
`ng generate @angular/core: --help`
9+
10+
## Common Migration Schematics
11+
12+
Use the following commands to apply specific syntax updates. You can scope these commands to a specific project or directory using the `--project <name>` or `--path <dir>` flags.
13+
14+
| Feature to Modernize | Command to Execute |
15+
| :------------------------ | :---------------------------------------------------------- |
16+
| **Built-in Control Flow** | `ng generate @angular/core:control-flow` |
17+
| **Signal-based Inputs** | `ng generate @angular/core:signal-input-migration` |
18+
| **Signal Queries** | `ng generate @angular/core:signal-queries-migration` |
19+
| **Functional Outputs** | `ng generate @angular/core:output-migration` |
20+
| **`inject()` Function** | `ng generate @angular/core:inject` |
21+
| **Self-Closing Tags** | `ng generate @angular/core:self-closing-tag` |
22+
| **Standalone** | `ng generate @angular/core:standalone` (See workflow below) |
23+
24+
## Specialized Workflow: Migrating to Standalone
25+
26+
The Standalone migration is an interactive, multi-step refactoring. You **MUST** perform this in three discrete stages, verifying that the application builds and runs correctly after each stage completes:
27+
28+
1. **Phase 1**: Run `ng generate @angular/core:standalone` and select the option to **Convert all components, directives, and pipes to standalone**.
29+
2. **Phase 2**: Verify the build with `ng build`. Run the command again and select **Remove unnecessary NgModule classes**.
30+
3. **Phase 3**: Verify the build with `ng build`. Run the final pass and select **Bootstrap the project using standalone APIs**.

0 commit comments

Comments
 (0)