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

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

利用可能なスキル

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

スキルの場所

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

一般 (.agents/skills/)

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

.agents/
  skills/
    igniteui-wc-choose-components/
      SKILL.md
    igniteui-wc-integrate-with-framework/
      SKILL.md
    igniteui-wc-customize-component-theme/
      SKILL.md
    igniteui-wc-optimize-bundle-size/
      SKILL.md
    igniteui-wc-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

macOS / Linux / Windows (PowerShell)

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

Windows (Command Prompt)

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

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

macOS / Linux / Windows (PowerShell)

cp -r node_modules/igniteui-webcomponents/skills/igniteui-wc-choose-components .agents/skills/
cp -r node_modules/igniteui-webcomponents/skills/igniteui-wc-customize-component-theme .agents/skills/
cp -r node_modules/igniteui-webcomponents/skills/igniteui-wc-optimize-bundle-size .agents/skills/
cp -r node_modules/igniteui-webcomponents/skills/igniteui-wc-integrate-with-framework .agents/skills/
cp -r node_modules/igniteui-webcomponents/skills/igniteui-wc-generate-from-image-design .agents/skills/

Windows (Command Prompt)

robocopy node_modules\igniteui-webcomponents\skills\igniteui-wc-choose-components .agents\skills\igniteui-wc-choose-components /E
robocopy node_modules\igniteui-webcomponents\skills\igniteui-wc-customize-component-theme .agents\skills\igniteui-wc-customize-component-theme /E
robocopy node_modules\igniteui-webcomponents\skills\igniteui-wc-optimize-bundle-size .agents\skills\igniteui-wc-optimize-bundle-size /E
robocopy node_modules\igniteui-webcomponents\skills\igniteui-wc-integrate-with-framework .agents\skills\igniteui-wc-integrate-with-framework /E
robocopy node_modules\igniteui-webcomponents\skills\igniteui-wc-generate-from-image-design .agents\skills\igniteui-wc-generate-from-image-design /E

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

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

gh skill install IgniteUI/igniteui-webcomponents

インストール時に、どのスキルをインストールするか、およびプロジェクト内のスキル ファイルの対象 エージェントを選択するよう求められます。CLI は選択したエージェントに応じて選択したスキルをダウンロードして所定の場所へ配置します。

後でスキルを更新するには、次のコマンドを実行してください:

gh skill update IgniteUI/igniteui-webcomponents

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

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

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

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

gemini skills install https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-choose-components
gemini skills install https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-customize-component-theme
gemini skills install https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-optimize-bundle-size
gemini skills install https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-integrate-with-framework
gemini skills install https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-generate-from-image-design

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

gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-choose-components
gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-customize-component-theme
gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-optimize-bundle-size
gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-integrate-with-framework
gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-generate-from-image-design

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

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

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

npx skills add IgniteUI/igniteui-webcomponents

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

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

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

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

Theming MCP サーバー

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

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

その他のリソース

• Ignite UI for Web Components で作業を開始

• Ignite UI CLI

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

• Ignite UI CLI MCP

• Ignite UI Theming MCP

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

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