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

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

Note

AI ツールのランドスケープは急速に進化しています。スキルの検出場所と配布オプションは、ツールや IDE の更新に伴って変更される可能性があります。最新情報については、使用しているツールやエージェントの公式ドキュメントを常に参照してください。

利用可能なスキル

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

スキル	パス	説明
コンポーネントとレイアウト	skills/igniteui-angular-components/SKILL.md	スタンドアロン コンポーネント、フォーム コントロール、オーバーレイ、レイアウト
データ グリッド	skills/igniteui-angular-grids/SKILL.md	Grid、Tree Grid、Hierarchical Grid、Pivot Grid、ソート、フィルタリング、グループ化、ページング、リモート データ
テーマ設定とスタイル設定	skills/igniteui-angular-theming/SKILL.md	パレット、タイポグラフィ、エレベーション、コンポーネント テーマ、MCP サーバー

Note

Ignite UI for Angular 21.1.0 以降、これらのスキルはエージェントのスキル パス (例: .claude/skills、.agents/skills、.cursor/rules/) に配置すると自動的に検出されます。このリリースには、これらのスキルをプロジェクトに自動的に追加するオプションの移行が含まれています。

スキルの場所

各 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

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

GitHub Copilot

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

スコープ	場所
プロジェクト	.github/skills/、.claude/skills/
パーソナル	~/.copilot/skills/、~/.claude/skills/ (Copilot コーディング エージェントと GitHub Copilot CLI のみ)

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

Claude

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

スコープ	場所
プロジェクト	.claude/skills/
パーソナル	~/.claude/skills/

Cursor

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

スコープ	場所
プロジェクト	.agents/skills/、.cursor/skills/
ユーザー (グローバル)	~/.cursor/skills/

Gemini CLI と Antigravity

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

スコープ	場所
ワークスペース	.gemini/skills/、.agents/skills/
ユーザー	~/.gemini/skills/、~/.agents/skills/

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

Junie (JetBrains IDE)

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

スコープ	場所
プロジェクト	.junie/skills/
ユーザー	~/.junie/skills/

Windsurf

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

スコープ	場所
ワークスペース	.windsurf/skills/、.agents/skills/
グローバル	~/.codeium/windsurf/skills/、~/.agents/skills/

---

スキルのインストール

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

オプション A — インストールされた npm パッケージを使用する

Ignite UI for Angular がプロジェクトに既にインストールされている場合、スキル ファイルは node_modules の下で利用できます。それらをプロジェクトにコピーする (例: .agents/skills/ の下での使用) には、次のコマンドを実行します:

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/

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

オプション 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 --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

インストールが完了すると、スキル ファイルはそれぞれの場所で利用できるようになり、互換性のある 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 for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)