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

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

利用可能なスキル

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

スキルの場所

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

一般 (.agents/skills/)

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

.agents/
  skills/
    igniteui-react-components/
      SKILL.md
    igniteui-react-customize-theme/
      SKILL.md
    igniteui-react-optimize-bundle-size/
      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 — インストールされた npm パッケージを使用する

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

macOS / Linux / Windows (PowerShell)

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

Windows (Command Prompt)

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

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

macOS / Linux / Windows (PowerShell)

cp -r node_modules/igniteui-react/skills/igniteui-react-components .agents/skills/
cp -r node_modules/igniteui-react/skills/igniteui-react-customize-theme .agents/skills/
cp -r node_modules/igniteui-react/skills/igniteui-react-optimize-bundle-size .agents/skills/

Windows (Command Prompt)

robocopy node_modules\igniteui-react\skills\igniteui-react-components .agents\skills\igniteui-react-components /E
robocopy node_modules\igniteui-react\skills\igniteui-react-customize-theme .agents\skills\igniteui-react-customize-theme /E
robocopy node_modules\igniteui-react\skills\igniteui-react-optimize-bundle-size .agents\skills\igniteui-react-optimize-bundle-size /E

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

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

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

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

gemini skills install https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-components
gemini skills install https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-customize-theme
gemini skills install https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-optimize-bundle-size

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

gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-components
gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-customize-theme
gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-optimize-bundle-size

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

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

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

npx skills add IgniteUI/igniteui-react

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

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

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

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

Theming MCP サーバー

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

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

その他のリソース

• Ignite UI for React で作業を開始

• Ignite UI CLI

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

• Ignite UI CLI MCP

• Ignite UI Theming MCP

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

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