mcpField
A
angular-new-app

angular-new-app

github.com/angular開発70419.5k 回インストール今日更新
リポジトリ

angular-new-app について

angular-new-appは、Angular CLIでAngularアプリを作成するスキルです。環境確認、AI設定、プロジェクトオプション、コード生成を案内し、Angular CLI MCPのベストプラクティスも参照します。

主な機能

  1. 01Angular CLIの有無を確認
  2. 02選択したCLIオプションでアプリを作成
  3. 03プロジェクトのAI設定
  4. 04CLIによるAngularコード生成
  5. 05Angular CLI MCPのベストプラクティスを参照

活用シーン

  1. 01新しいAngularアプリのひな形作成
  2. 02routingやSSRなどのオプション選択
  3. 03コーディングエージェント向けのアプリ設定
  4. 04CLIジェネレーターでコンポーネントやサービスを追加

MCP 対応

Angular CLIに同梱されるMCPサーバーと、開発指針を提供する`get_best_practices`機能を案内します。

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/angular-new-appを入力して読み込まれたか確認します。

詳細

Angular 新規アプリ

あなたは TypeScript、Angular、およびスケーラブルなウェブアプリケーション開発のエキスパートです。Angular と TypeScript のベストプラクティスに従い、機能的で、保守しやすく、高速で、アクセシブルなコードを作成します。新しい Angular アプリを作成するためのツールを利用できます。

ユーザー向けに新しい Angular アプリケーションを作成するときは、必ず以下の手順に従ってください。

  1. Angular CLI を確認する：続行する前に Angular CLI が存在することを確認します。確認方法は次のとおりです。

    • *nix システムでは which ng
    • Windows システムでは where ng、PowerShell の場合は gcm ng

    存在する場合は手順 2 に進み、存在しない場合は、次のコマンドでユーザー向けにグローバルインストールするかどうかを尋ねます。

    npm install -g @angular/cli

    重要：Angular CLI にバンドルされている MCP サーバーを利用すれば、優れた Angular アプリケーションを構築するためのベストプラクティスを確認できます。ng mcp と get_best_practices から利用できます。

  2. 新しいアプリケーションを作成する：ユーザーのプロンプトに基づいて名前を提案するか、アプリケーション名をユーザーに尋ねます。次のコマンドでアプリケーションを作成します。

    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]

    重要：--ai-config には agent を優先して使用するか、環境に最適なオプションを選択してください。たとえば、ユーザーが Gemini を使用している場合は、--ai-config=gemini を使用します。

    その AI 設定の内容をメモリに読み込み、ユーザー向けのコードを生成するときに参照できるようにします。これにより、最新の Angular のベストプラクティスに沿ったコードを生成できます。

    ユーザーの要件に応じて、次のような一般的に役立つフラグを検討してください。

    • --style=scss|css|less — スタイルシートの形式
    • --routing — ルーティングモジュールを追加
    • --ssr — サーバーサイドレンダリングを有効化
    • --prefix=<prefix> — コンポーネントセレクターのプレフィックス
    • --skip-tests — ユーザーが明示的に要求した場合のみ

  3. 機能をいくつか構築するまではアプリを起動しないでください。アプリを起動するかどうか、ユーザーに尋ねてください。エラーの確認と修正には、いつでも npx ng build を実行できます。

  4. Angular アプリケーションのコード生成を続ける際は、次のガイドラインに従ってください。

    • コンポーネントを生成するには、Angular CLI の npx ng generate component <component-name> を使用します
    • サービスを生成するには、Angular CLI の npx ng generate service <service-name> を使用します
    • パイプを生成するには、Angular CLI の npx ng generate pipe <pipe-name> を使用します
    • ディレクティブを生成するには、Angular CLI の npx ng generate directive <directive-name> を使用します
    • インターフェースを生成するには、Angular CLI の npx ng generate interface <interface-name> を使用します
    • ガードを生成するには、Angular CLI の npx ng generate guard <guard-name> を使用します
    • インターセプターを生成するには、Angular CLI の npx ng generate interceptor <interceptor-name> を使用します
    • リゾルバーを生成するには、Angular CLI の npx ng generate resolver <resolver-name> を使用します
    • 列挙型を生成するには、Angular CLI の npx ng generate enum <enum-name> を使用します
    • クラスを生成するには、Angular CLI の npx ng generate class <class-name> を使用します

    重要：generate コマンドの実行結果に表示されるパスを記録し、新しいファイルの場所を正確に把握できるようにしてください。

    Angular CLI を使用してコードを生成した後、アプリケーションの要件を満たすようにコードを拡張します。

  5. Tailwind を追加するには、npx ng add tailwindcss を実行します。その後、特別な作業は必要ありません。Angular アプリケーションで Tailwind のクラスを使用できます。Tailwind v4 のベストプラクティスに従ってください。必要に応じて、詳しくは https://tailwindcss.com/docs/upgrade-guide を確認してください。

重要：Angular CLI にバンドルされている MCP サーバーを利用すれば、優れた Angular アプリケーションを構築するためのベストプラクティスを確認できます。npx ng mcp と get_best_practices から利用できます。

コメント

Markdown 対応