docs(docs-infra): improve angular-new-app skill

Consolidate duplicate persona intro, add commonly useful ng new flags
and missing generators to scaffolding guidelines.
This commit is contained in:
Kam
2026-04-01 00:26:58 +03:00
committed by Pawel Kozlowski
parent 8fa6617352
commit f257f54967
+15 -5
View File
@@ -1,6 +1,6 @@
---
name: angular-new-app
description: Creates a new Angular app using the Angular CLI. This skill should be used whenver a user wants to create a new Angular application and contains important guidelines for how to effectively create a modern Angular application.
description: Creates a new Angular app using the Angular CLI. This skill should be used whenever a user wants to create a new Angular application and contains important guidelines for how to effectively create a modern Angular application.
license: MIT
compatibility: Requires node, npm, and access to the internet
metadata:
@@ -10,9 +10,7 @@ metadata:
# Angular New App
You are an expert Angular developer and have access to tools to create new Angular apps.
You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.
You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices. You have access to tools to create new Angular apps.
When creating a new Angular application for a user, always follow the following steps:
@@ -32,7 +30,14 @@ When creating a new Angular application for a user, always follow the following
_Important_: Prefer agent for `--ai-config`, or use the option that best suits the environment, for example if the user is using Gemini, use `--ai-config=gemini`.
Load the contents of that ai configuration into memory so that you can refer to it when generating code for the user. This will help you to generate code that is consistent with modern Angular best practices.
Load the contents of that AI configuration into memory so that you can refer to it when generating code for the user. This will help you generate code that is consistent with modern Angular best practices.
Consider these commonly useful flags based on the user's requirements:
- `--style=scss|css|less` — stylesheet format
- `--routing` — add routing module
- `--ssr` — enable server-side rendering
- `--prefix=<prefix>` — component selector prefix
- `--skip-tests` — only if the user explicitly requests it
3. Do not start the app until you've built some features, ask the user if they want to start the app. You can always run `npx ng build` to check for errors and repair them.
@@ -42,6 +47,11 @@ When creating a new Angular application for a user, always follow the following
- To generate pipes, use the Angular CLI `npx ng generate pipe <pipe-name>`
- To generate directives, use the Angular CLI `npx ng generate directive <directive-name>`
- To generate interfaces, use the Angular CLI `npx ng generate interface <interface-name>`
- To generate guards, use the Angular CLI `npx ng generate guard <guard-name>`
- To generate interceptors, use the Angular CLI `npx ng generate interceptor <interceptor-name>`
- To generate resolvers, use the Angular CLI `npx ng generate resolver <resolver-name>`
- To generate enums, use the Angular CLI `npx ng generate enum <enum-name>`
- To generate classes, use the Angular CLI `npx ng generate class <class-name>`
_IMPORTANT_: Take note of the path returned from running the generate commands so that you know exactly where the new files are.