メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
The index to a Book of Spells — a large, curated library of ready-made spells (skills in the SKILL.md format) gathered from many providers (Google, OpenAI, and more), covering cloud platforms, deployment, design tools, PDFs, browser automation, security, and much else. The spells are NOT preloaded — there may be thousands. Use this whenever the user asks to cast a spell, or for a spell to do something, or names a capability, provider, or tool you do not already have loaded (e.g. "cast a spell for Figma", "is there a spell for deploying?", "use the bigquery spell"), or whenever a task might be served by a specialised, ready-made spell. Casting a spell MEANS consulting this index to discover and load the right one on demand — do that first, rather than improvising. This is also the single entry point to the Book's own keystones: route here to AUTHOR a new spell (the-spellwright), to FIND or CONNECT an MCP server / external tool (the-emissary), or to INSTALL the Book into a conduit (the-tether).
How to install this Book of Spells into a conduit so its gathered skills become usable — by symlink, not by copy. Use whenever the user wants to install, set up, enable, add, or "load" the Book's spells into their agent; asks where skills go or how a conduit finds them; or asks how to keep the spells up to date. The companion to the-grimoire (which *finds* spells once they are installed): this one *shelves the Book* so the grimoire has something to find.
Find and connect an MCP server — an "Emissary of the Pact" — when the agent needs a tool, service, API, or data source it does not already have. Use when the user asks for an MCP server, to connect to or integrate an external service (Notion, GitHub, Figma, a database, Slack, a SaaS API…), asks "is there an MCP for X", "add an MCP", or sets a task that needs live tools the agent lacks. This rite DISCOVERS a server from the official MCP Registry and reputable directories and PROPOSES its connection config for the user to approve — it NEVER installs, launches, or writes credentials on its own. The companion to the-grimoire: that finds spells (inert skills); this finds Emissaries (live tool-servers).
Forge a new skill ("spell") from scratch — author a well-formed SKILL.md with discoverable frontmatter, lean progressive-disclosure structure, and optional references/scripts. Use whenever the user wants to create, write, author, draft, or scaffold a new skill or SKILL.md; package a repeatable workflow as a reusable skill; improve a skill's description so an agent reliably triggers it; or learn how skills are structured. The companion to the-grimoire: that one finds existing spells, this one makes new ones.
Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
| name | angular-angular-new-app |
| 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 | {"author":"Angular Team @ Google","version":"1.0"} |
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:
*nix systems which ngwhere ng, if powershell gcm ngIf 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/cli
IMPORTANT: There are best practices available for building outstanding Angular applications via the MCP server that is bundled with the Angular CLI. Available through ng mcp and the get_best_practices.
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 itDo 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.
Remember the following guidelines for continuing to generate Angular application code:
npx ng generate component <component-name>npx ng generate service <service-name>npx ng generate pipe <pipe-name>npx ng generate directive <directive-name>npx ng generate interface <interface-name>npx ng generate guard <guard-name>npx ng generate interceptor <interceptor-name>npx ng generate resolver <resolver-name>npx ng generate enum <enum-name>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 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.