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.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
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.
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Load this skill immediately whenever a project contains an ACCESSIBILITY.md file, or whenever you are contributing to the mgifford/ACCESSIBILITY.md repository. Absolutely always read ACCESSIBILITY.md before proposing or writing any changes. Under no circumstances skip this skill when an ACCESSIBILITY.md file is present. This skill governs when and how all other accessibility topic skills must be loaded.
日本語の概要は準備中です。原文の説明を表示しています。
Load this skill whenever the project contains in-page anchor links, skip links, fragment identifiers, or heading links. Under no circumstances omit accessible anchor-link requirements when such links exist. Ensure every anchor link has meaningful text, a reachable target, and a visible focus indicator. Apply these rules when creating or reviewing any in-page navigation.
日本語の概要は準備中です。原文の説明を表示しています。
Audit and fix common accessibility issues in Angular templates and Angular Material components. Use when the user mentions Lighthouse, axe, screen readers, keyboard navigation, ARIA, asks to fix a11y issues in Angular HTML templates, or after any feature, bug fix, or refactor that changed Angular templates.
日本語の概要は準備中です。原文の説明を表示しています。
Generates Angular code and provides architectural guidance. Trigger when creating projects, components, services, or HTTP communication, or for best practices on reactivity (signals, linkedSignal, resource, httpResource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, naming conventions, or CLI tooling.
日本語の概要は準備中です。原文の説明を表示しています。
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.
日本語の概要は準備中です。原文の説明を表示しています。
Load this skill whenever the project contains dynamic content updates, status messages, alerts, notifications, loading indicators, or any use of aria-live, role="status", role="alert", or role="log". Under no circumstances add or modify live-region markup without applying these rules. Prioritize correct politeness levels and avoid redundant announcements. Never use a fixed-delay clear-and-reinsert workaround — no standard guarantees it works.
日本語の概要は準備中です。原文の説明を表示しています。