Ignite UI for Blazor エージェント スキル
Ignite UI for Blazor には エージェント スキル が付属しています。これは、AI コーディング アシスタント (GitHub Copilot、Cursor、Windsurf、Claude、Gemini CLI、JetBrains Junie など) に Ignite UI for Blazor の使用方法を教える構造化されたナレッジ ファイルです。これらのスキル ファイルは、コンポーネント、グリッド、データ操作、テーマ設定に関するコンテキスト対応のガイダンスを提供し、AI アシスタントがベスト プラクティスに従った正確で慣用的なコードを生成できるようにします。
AI ツールのランドスケープは急速に進化しています。スキルの検出場所と配布オプションは、ツールや IDE の更新に伴って変更される可能性があります。最新情報については、使用しているツールやエージェントの公式ドキュメントを常に参照してください。
利用可能なスキル
スキル ファイルは、Ignite UI for Blazor リポジトリの skills/ ディレクトリにあります:
| スキル | パス | 説明 |
|---|---|---|
| コンポーネントとレイアウト | skills/igniteui-blazor-components/SKILL.md | コンポーネント、フォーム コントロール、オーバーレイ、レイアウト |
| データ グリッド | skills/igniteui-blazor-grids/SKILL.md | Grid、Tree Grid、Hierarchical Grid、Grid Lite、ソート、フィルタリング、グループ化、ページング、リモート データ |
| テーマ設定とスタイル設定 | skills/igniteui-blazor-theming/SKILL.md | パレット、タイポグラフィ、エレベーション、コンポーネント テーマ、MCP サーバー |
| 画像デザインからの生成 | skills/igniteui-blazor-generate-from-image-design/SKILL.md | スクリーンショット、モックアップ、ワイヤーフレームから Ignite UI コンポーネントを使用した Blazor アプリを構築 |
スキルの場所
各 AI コーディング ツールは、特定のディレクトリからスキルを検出します。AI アシスタントがスキルを自動的に検出して使用できるように、スキル ファイルを適切な場所に配置します。一般的な .agents/skills/ の規則は複数のツールでサポートされていますが、各ツールには独自の特定のディレクトリもあります。
一般 (.agents/skills/)
.agents/skills/ ディレクトリは、VS Code と Copilot、OpenAI Codex、Cursor、Gemini CLI、Antigravity、Windsurf など、複数のツールでサポートされているクロスエージェントの規則です。プロジェクト ルートの .agents/skills/ にスキル ディレクトリをコピーします:
.agents/
skills/
igniteui-blazor-components/
SKILL.md
igniteui-blazor-grids/
SKILL.md
igniteui-blazor-theming/
SKILL.md
igniteui-blazor-generate-from-image-design/
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 — 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
| フラグ | 値 | デフォルト |
|---|---|---|
--assistants | generic、vscode、cursor、gemini、junie、none | インタラクティブに選択 |
--agents | generic、claude、copilot、cursor、codex、windsurf、gemini、junie、none | インタラクティブに選択 |
Blazor の場合、ai-config は .csproj または .sln からプロジェクトを検出します。IgniteUI.Blazor NuGet パッケージはインストールされている必要はありません。プロジェクト ファイルが見つからない場合、コマンドがフレームワークの選択を求めます。
オプション B — GitHub CLI を使用する
GitHub CLI を使用すると、Ignite UI for Blazor リポジトリからスキル ファイルを直接ダウンロードできます。インストール を開始するには、プロジェクト ルートで次のコマンドを実行してください:
gh skill install IgniteUI/igniteui-blazor
インストール時に、どのスキルをインストールするか、およびプロジェクト内のスキル ファイルの対象 エージェントを選択するよう求められます。CLI は選択したエージェントに応じて選択したスキルをダウンロードして所定の場所へ配置します。
後でスキルを更新するには、次のコマンドを実行してください:
gh skill update IgniteUI/igniteui-blazor
オプション C — gemini skills CLI を使用する
gemini skills install コマンドは、Git リポジトリから直接スキルをインストールします。2 つのスコープをサポートします:
- ユーザー スコープ (デフォルト) — ユーザー アカウントにスキルをグローバルにインストールし、すべてのプロジェクトで利用できるようにします。スキルは
~/.gemini/skills/または~/.agents/skills/に配置されます。 - ワークスペース スコープ — 現在のプロジェクト ディレクトリの
.agents/skills/にスキルをローカルにインストールし、そのプロジェクトのみにスコープします。
ユーザー スコープにインストールする (デフォルト):
gemini skills install https://github.com/IgniteUI/igniteui-blazor.git --path skills/igniteui-blazor-components
gemini skills install https://github.com/IgniteUI/igniteui-blazor.git --path skills/igniteui-blazor-grids
gemini skills install https://github.com/IgniteUI/igniteui-blazor.git --path skills/igniteui-blazor-theming
gemini skills install https://github.com/IgniteUI/igniteui-blazor.git --path skills/igniteui-blazor-generate-from-image-design
ワークスペース スコープにインストールする:
gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-blazor.git --path skills/igniteui-blazor-components
gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-blazor.git --path skills/igniteui-blazor-grids
gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-blazor.git --path skills/igniteui-blazor-theming
gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-blazor.git --path skills/igniteui-blazor-generate-from-image-design
インストールが完了すると、スキル ファイルはそれぞれの場所で利用できるようになり、互換性のある AI アシスタントによって自動的に検出されます。
オプション D — npx skills CLI を使用する
skills CLI は、スキルをプロジェクトに直接ダウンロードしてインストールするインタラクティブなツールです。プロジェクト ルートで次のコマンドを実行します:
npx skills add IgniteUI/igniteui-blazor
CLI は、一連のプロンプトをガイドします:
- インストールするスキルを選択します (components、theming など)。
- プロジェクト内のスキル ファイルのターゲット場所を選択します (例:
.agents/skills/、.github/skills/)。 - 選択したスキル ファイルを自動的にダウンロードして書き込みます。
完了すると、スキルはすぐに使用できます。手動でファイルをコピーする必要はありません。
注: Node.js とインターネット接続が必要です。コマンドは、IgniteUI/igniteui-blazor リポジトリから最新のスキル ファイルを取得します。
Theming MCP サーバー
Theming スキルには、igniteui-theming MCP サーバーのセットアップ手順が含まれています。これにより、AI アシスタントがパレット生成やコンポーネント テーマのひな形作成などのライブ テーマ ツールにアクセスできます。VS Code、Cursor、Claude Desktop、JetBrains IDE の構成手順については、Theming スキル ファイルを参照してください。
Theming MCP の詳細については、Ignite UI Theming MCP のドキュメントを参照してください。
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。