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

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

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

利用可能なスキル

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

スキル	パス	説明
コンポーネント	`skills/igniteui-react-components/SKILL.md`	適切なコンポーネントの特定、インストール、インポート、使用 — JSX パターン、イベント処理、refs、フォーム、TypeScript
テーマ設定とスタイル設定	`skills/igniteui-react-customize-theme/SKILL.md`	パレット、タイポグラフィ、エレベーション、コンポーネントテーマ、MCP サーバー
最適化	`skills/igniteui-react-optimize-bundle-size/SKILL.md`	バンドルサイズを最適化するためのツリーシェイキングのベストプラクティス

スキルの場所

各 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 はスキルを以下から検出します:

スコープ	場所
プロジェクト	`.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 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 は、一連のプロンプトをガイドします:

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

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

注: 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 エージェント スキル