Angular New App Skill: Create a Modern Angular App With Claude

angular-new-app (from the Angular team) makes Claude create a new Angular app with the Angular CLI and then build features with CLI generators.

Installs: 19.9K; on skills.sh
Stars: 708; on GitHub
Updated: Oct 2026; last repo commit

When you ask for a new Angular application, the skill walks Claude through five steps. Check that the Angular CLI (ng) is installed, and if it is not, ask before installing it globally. Create the app with npx ng new in non-interactive mode, passing flags that match your description. Then build features with ng generate, and add Tailwind with ng add tailwindcss when you want it.

When creating the app it sets --ai-config to your agent type (the SKILL.md prefers agents) and loads that file so later code follows modern Angular practice. Commonly useful flags are style (scss, css or less), routing, --ssr and a selector prefix.

SKILL.md requires node, npm and internet access. It tells Claude not to start the app until some features exist, and to use npx ng build to find errors. It also points to the best-practices tool in the Angular CLI's bundled MCP server, started with ng mcp.

Good for

Developers starting a new Angular project with an AI agent
Teams who want AI-ready config files created with the app
Anyone adding Tailwind to a fresh Angular app

Install angular-new-app

Claude Code

Copy this prompt.

Install the angular-new-app skill in Claude Code. Run this command:

npx skills add https://github.com/angular/skills --skill angular-new-app

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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.

Key facts

Author: Angular Team @ Google (GitHub: angular)
Repo: angular/skills
Installs on skills.sh: 19,857 as of 2026-11-02
GitHub stars (whole repo): 708 as of 2026-11-02
License: MIT
Last repo commit: 2026-10-31
Files in the skill folder: 1 file including SKILL.md
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass

What it includes

which ng, where ng or gcm ng
If missing, asks to install it globally with npm install -g @angular/cli.
Runs code · 1. Check for the Angular CLI
npx ng new <name> --interactive=false --ai-config=<agent>
Flags include --style, --routing, --ssr, --prefix and --skip-tests (only if you ask). Writes a new project folder.
Runs code · 2. Create the application
npx ng build to check for errors
Does not start the app until features exist, and asks first.
Runs code · 3. Build and verify
ng generate component, service, pipe, directive, guard and more
Ten generators in total. Claude notes the returned path, then edits the generated files.
Runs code · 4. Generate code
npx ng add tailwindcss
Then Tailwind classes can be used in the app. Follows Tailwind v4 guidance.
Runs code · 5. Add Tailwind
ng mcp and get_best_practices
The Angular CLI ships an MCP server (ng mcp) with a get_best_practices tool, which SKILL.md says Claude should use for guidance.
Runs code · Best-practices MCP tool

From the official docs

Permissions

Low risk

The skill makes Claude run npm, npx and Angular CLI commands that download packages and create files, including an optional global CLI install. Approve the install and the new project's folder before it runs.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It may install the Angular CLI globally
If ng is missing, SKILL.md says to ask first, then run npm install -g @angular/cli. github.com
It creates a project and downloads dependencies
npx ng new and npx ng add tailwindcss fetch packages from npm and write files. Run them in the folder you intend. github.com
It writes AI config files and points Claude at the Angular CLI MCP server
ng new is run with --ai-config (agents by default, or claude, cursor, gemini and others), which adds agent configuration files to the new project, and SKILL.md tells Claude to load them. It also points to the MCP server bundled with the Angular CLI (ng mcp). github.com

Technical details

Talks to	npm registry (npx, npm install, ng add)
Scopes	a new project folder npm registry

Questions

What does the angular-new-app skill do?

It guides Claude to create a new Angular app with the Angular CLI, set up AI config files for your agent, generate code with CLI generators and optionally add Tailwind.

How do I install it in Claude Code or Codex?

Use the install box above. The angular/skills README documents npx skills add https://github.com/angular/skills and says the skills suit tools such as Gemini CLI and Antigravity.

What does it need on my machine?

SKILL.md lists node, npm and internet access. If the Angular CLI is missing it asks before installing it globally.

Is it safe to install?

It is a single instruction file with no scripts. Following it makes Claude run npm, npx and Angular CLI commands that download packages and create a project folder, including a possible global CLI install that it asks about first.

How is it different from angular-developer?

This skill only creates and sets up a new app. The README describes angular-developer as the skill for generating Angular code and architectural guidance, such as signals, forms, routing and testing, in an existing project.

Which AI config does it pick?

SKILL.md prefers agents for --ai-config, or the option for your tool, such as gemini. The allowed values listed are agents, claude, copilot, cursor, gemini, jetbrains, none and windsurf.

Information

updated Nov 2, 2026

Repository: angular/skills
Folder: angular-new-app

angular/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2

angular-new-app SKILL.md · github.com
angular/skills README · github.com