angular-new-app
- Repo stars 100,171
- License MIT
- Author updated Live
- Author repo angular
- Domain
- Other
- Compatible agents
-
- Claude Code
- Cursor
- Cline
- Codex
- Windsurf
- Gemini CLI
- +20
- Trust score
- 94 / 100 · audit passed
- Author / version / license
- @angular · MIT
- Token usage
- Lean
- Setup complexity
- Guided setup
- External API key
- Not required
- Operating systems
- Windows
- Runtime requirements
- No special requirements
- Permissions
-
- Read-only
- Write / modify
- Shell exec
- Network behavior
- Local-only
- Install commands
- 26 variants
Profile is derived at build time from SKILL.md and install vectors. Subject to drift from author intent.
Heads up: 未限定 allowed-tools，默认拥有全部工具权限。
---
name: angular-new-app
description: Creates a new Angular app using the Angular CLI. This skill should be used whenever a user wants…
category: other
runtime: no special runtime
---
# angular-new-app output preview
## PART A: Task fit
- Use case: 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..
- Inputs: target material, constraints, expected output, and acceptance criteria.
- Evidence boundary: follow “Decide Fit First / Design Intent / How To Use It” and do not present inference as author intent.
## PART B: Execution result
- **01** The card summarizes the use case; runtime output centers on “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.”.
- **02** When the source has headings, the agent prioritizes “Decide Fit First / Design Intent / How To Use It” so the result follows the author’s structure.
- **03** Typical output includes task judgment, concrete steps, required commands or file edits, validation, and follow-up options.
- **04** Risk context follows the fingerprint: read files, write/modify files, run shell commands; mostly runs locally; usually needs no extra API key.
## Running Rules
- read files, write/modify files, run shell commands; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding scope.
- Return the result, validation criteria, and next iteration options.The source does not require a stable slash command. After installation, invoke the skill by name and describe the task.
Name target files or source material, expected output, forbidden changes, and whether network or shell access is allowed. Permission fingerprint: read files, write/modify files, run shell commands.
Start with a small task and check whether the result follows “Decide Fit First / Design Intent / How To Use It”. Inspect diffs, logs, previews, or tests before expanding scope.
Confirm the final output includes a concrete result, evidence, and next action. If it stays generic, tighten inputs, boundaries, and acceptance criteria.
---
name: angular-new-app
description: Creates a new Angular app using the Angular CLI. This skill should be used whenever a user wants…
category: other
source: angular/angular
---
# angular-new-app
## When to use
- Creates a new Angular app using the Angular CLI. This skill should be used whenever a user wants to create a new Angul…
- Use it when the task has clear inputs, repeatable steps, and validation criteria.
## What to provide
- Target material, scope, expected result, and forbidden changes.
- Whether network, commands, file writes, or external services are allowed.
## Execution rules
- Organize steps around “Decide Fit First / Design Intent / How To Use It” and keep inference separate from source facts.
- read files, write/modify files, run shell commands; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding the task.
## Output requirements
- Return the deliverable, key evidence, validation method, and next action.
- Mark missing information as unknown; do not invent commands, platforms, or dependencies.The author source anchors workflow facts; repository files anchor sources and commands; Fluxly only adds fit, limitations, and quality judgment.
skill "angular-new-app" {
input -> user goal + target files + boundaries + acceptance criteria
context -> Decide Fit First / Design Intent / How To Use It
rules -> SKILL.md triggers / order / output contract
runtime -> no special runtime | read files, write/modify files, run shell commands | mostly runs locally
guardrails -> usually needs no extra API key + small-sample validation + diff/log review
output -> copyable result + checklist + next iteration
}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:
--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
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 buildto check for errors and repair them.Remember the following guidelines for continuing to generate Angular application code:
- To generate components, use the Angular CLI
npx ng generate component <component-name> - To generate services, use the Angular CLI
npx ng generate service <service-name> - 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.
Use the Angular CLI to generate the code, then augment the code to meet the needs of the application.
- To generate components, use the Angular CLI
To add tailwind, run
npx ng add tailwindcss. After that, you do not have to do anything else, you can start using tailwind classes in your Angular application. Follow the best practices for tailwind v4 here, learn more if needed: https://tailwindcss.com/docs/upgrade-guide.
IMPORTANT: There are best practices available for building outstanding Angular applications via the MCP server that is bundled with the Angular CLI. Available through npx ng mcp and the get_best_practices.
Decide Fit First
Design Intent
How To Use It
Boundaries And Review