angular-new-app
Create new Angular apps using CLI with modern best practices
Developer Setup
Setup & Installation
npx skills add https://github.com/angular/skills/blob/main/angular-new-app/SKILL.md --skill angular-new-appnpx skills add https://github.com/angular/skills/blob/main/angular-new-app/SKILL.md --skill angular-new-appOverview
What This Skill Does
Creates new Angular projects using the Angular CLI with modern configurations like Signals Forms, SSR, and tailwind CSS.
Application
When to use this Skill
- Creating a new Angular project from scratch.
- Configuring standard Angular CLI presets, routing, and styling stylesheets (SCSS/CSS).
- Adding and configuring Tailwind CSS for a new Angular application.
- Setting up initial AI agent configurations for the workspace.
Documentation
Show Skills.md file
Angular New App
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:
Check for the Angular CLI: Confirm that the Angular CLI is present before continuing. Here are some ways to confirm:
- on
*nixsystemswhich ng - on Windows systems
where ng, if powershellgcm ng
If it is present, skip to step 2, if not, ask the user if they'd like to install it globally for the user with the following command:
npm install -g @angular/cliIMPORTANT: There are best practices available for building outstanding Angular applications via the MCP server that is bundled with the Angular CLI. Available through
ng mcpand theget_best_practices.- on
Create the new application: To create the application either suggest a name based on the user prompt or ask the user the name of the application. Create the application with the following command:
npx ng new <app-name> [list of flags based on the description of the app] --interactive=false --ai-config=[agents, claude, copilot, cursor, gemini, jetbrains, none, windsurf]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 generate code that is consistent with modern Angular best practices.
Consider these commonly useful flags based on the user's requirements:
Recommendations