Ignite UI for Angular エージェント スキル

Ignite UI for Angular には エージェント スキル が付属しています。これは、AI コーディング アシスタント (GitHub Copilot、Cursor、Windsurf、Claude、Gemini CLI、JetBrains Junie など) に Ignite UI for Angular の使用方法を教える構造化されたナレッジ ファイルです。これらのスキル ファイルは、コンポーネント、グリッド、データ操作、テーマ設定に関するコンテキスト対応のガイダンスを提供し、AI アシスタントがベスト プラクティスに従った正確で慣用的なコードを生成できるようにします。

利用可能なスキル

スキル ファイルは、Ignite UI for Angular リポジトリの skills/ ディレクトリにあります:

スキルの場所

各 AI コーディング ツールは、特定のディレクトリからスキルを検出します。AI アシスタントがスキルを自動的に検出して使用できるように、スキル ファイルを適切な場所に配置します。一般的な .agents/skills/ の規則は複数のツールでサポートされていますが、各ツールには独自の特定のディレクトリもあります。

一般 (.agents/skills/)

.agents/skills/ ディレクトリは、VS Code と Copilot、OpenAI Codex、Cursor、Gemini CLI、Antigravity、Windsurf など、複数のツールでサポートされているクロスエージェントの規則です。プロジェクト ルートの .agents/skills/ にスキル ディレクトリをコピーします:

.agents/
  skills/
    igniteui-angular-components/
      SKILL.md
    igniteui-angular-grids/
      SKILL.md
    igniteui-angular-theming/
      SKILL.md
    igniteui-angular-generate-from-image-design/
      SKILL.md

すべてのプロジェクトで利用可能なユーザー レベル (グローバル) スキルの場合は、代わりに ~/.agents/skills/ を使用します。

GitHub Copilot

GitHub Copilot はスキルを以下から検出します:

ヒント: VS Code では、これらの場所に加えて一般的な .agents/skills/ と ~/.agents/skills/ も含まれ、chat.agentSkillsLocations 設定を使用して追加のスキルの場所を構成できます。

Claude

Claude はスキルを以下から検出します:

Cursor

Cursor はスキルを以下から検出します:

Gemini CLI と Antigravity

Gemini CLI と Antigravity はスキルを以下から検出します:

ヒント: Gemini CLI で /skills スラッシュ コマンドを使用して、インストールされたスキルを表示および管理できます。

Junie (JetBrains IDE)

Junie はスキルを以下から検出します:

Windsurf

Windsurf はスキルを以下から検出します:

スキルのインストール

以下のオプションのいずれかを使用して、スキル ファイルをダウンロードし、AI アシスタントに適したスキルの場所に配置します。

オプション A — Ignite UI CLI を使用する

ai-config コマンドは、MCP サーバーを構成し、各エージェントのスキル ディレクトリにフレームワーク固有のスキル ファイルをコピーし、インストラクション ファイルをセットアップします — すべて 1 つのステップで実行できます。--assistants を使用して MCP 構成を受け取るコーディング アシスタントを選択し、--agents を使用してスキル ファイルを受け取るエージェントを選択します。既存のファイルは、コンテンツが変更された場合にのみ更新されます。パラメーターが指定されていない場合、コマンドはインタラクティブ モードに入り、アシスタントとエージェントを選択するよう求めます。利用可能なオプションについては、以下の表を参照してください。

ig ai-config --assistants generic --agents claude

複数の値を --agents に指定して複数のエージェントを一度に対象にする場合:

ig ai-config --assistants generic vscode --agents claude copilot cursor

Angular Schematics を使用する場合:

ng generate @igniteui/angular-schematics:ai-config --assistants cursor --agents claude copilot

これにより、Ignite UI サーバーと共に @angular/cli MCP サーバーも登録されます。

macOS / Linux / Windows (PowerShell)

cp -r node_modules/igniteui-angular/skills/. .agents/skills/

Windows (Command Prompt)

robocopy node_modules\igniteui-angular\skills .agents\skills /E

または、必要に応じて個別のスキル ディレクトリをコピーします:

macOS / Linux / Windows (PowerShell)

cp -r node_modules/igniteui-angular/skills/igniteui-angular-components .agents/skills/
cp -r node_modules/igniteui-angular/skills/igniteui-angular-grids .agents/skills/
cp -r node_modules/igniteui-angular/skills/igniteui-angular-theming .agents/skills/
cp -r node_modules/igniteui-angular/skills/igniteui-angular-generate-from-image-design .agents/skills/

Windows (Command Prompt)

robocopy node_modules\igniteui-angular\skills\igniteui-angular-components .agents\skills\igniteui-angular-components /E
robocopy node_modules\igniteui-angular\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids /E
robocopy node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming /E
robocopy node_modules\igniteui-angular\skills\igniteui-angular-generate-from-image-design .agents\skills\igniteui-angular-generate-from-image-design /E

オプション B — GitHub CLI を使用する

GitHub CLI を使用して、Ignite UI for Angular リポジトリからスキル ファイルを直接ダウンロードできます。インストール プロセスを開始するには、プロジェクト ルートで次のコマンドを実行します:

gh skill install IgniteUI/igniteui-angular

インストールするスキルとプロジェクト内のスキル ファイルのターゲット エージェントを選択するよう求められます。CLI は選択されたエージェントに従って選択されたスキルをダウンロードして配置します。

後でスキルを更新するには、次のコマンドを実行します:

gh skill update IgniteUI/igniteui-angular

オプション B — gemini skills CLI を使用する

gemini skills install コマンドは、Git リポジトリから直接スキルをインストールします。2 つのスコープをサポートします:

• ユーザー スコープ (デフォルト) — ユーザー アカウントにスキルをグローバルにインストールし、すべてのプロジェクトで利用できるようにします。スキルは ~/.gemini/skills/ または ~/.agents/skills/ に配置されます。
• ワークスペース スコープ — 現在のプロジェクト ディレクトリの .agents/skills/ にスキルをローカルにインストールし、そのプロジェクトのみにスコープします。

ユーザー スコープにインストールする (デフォルト):

gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-components
gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-grids
gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-theming
gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-generate-from-image-design

ワークスペース スコープにインストールする:

gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-components
gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-grids
gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-theming
gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-generate-from-image-design

インストールが完了すると、スキル ファイルはそれぞれの場所で利用できるようになり、互換性のある AI アシスタントによって自動的に検出されます。

オプション C — npx skills CLI を使用する

skills CLI は、スキルをプロジェクトに直接ダウンロードしてインストールするインタラクティブなツールです。プロジェクト ルートで次のコマンドを実行します:

npx skills add IgniteUI/igniteui-angular

CLI は、一連のプロンプトをガイドします:

1. インストールするスキルを選択します (components、theming など)。
2. プロジェクト内のスキル ファイルのターゲット場所を選択します (例: .agents/skills/、.github/skills/)。
3. 選択したスキル ファイルを自動的にダウンロードして書き込みます。

完了すると、スキルはすぐに使用できます。手動でファイルをコピーする必要はありません。

注: Node.js とインターネット接続が必要です。コマンドは、IgniteUI/igniteui-angular リポジトリから最新のスキル ファイルを取得します。

Theming MCP サーバー

Theming スキルには、igniteui-theming MCP サーバーのセットアップ手順が含まれています。これにより、AI アシスタントがパレット生成やコンポーネント テーマのひな形作成などのライブ テーマ ツールにアクセスできます。VS Code、Cursor、Claude Desktop、JetBrains IDE の構成手順については、Theming スキル ファイルを参照してください。

Theming MCP の詳細については、Ignite UI Theming MCP のドキュメントを参照してください。

その他のリソース

• Ignite UI for Angular で作業を開始
• Angular Schematics & Ignite UI CLI

• Ignite UI を使った AI 支援開発

• Ignite UI CLI MCP

• Ignite UI Theming MCP

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)