こんにちは、ソリューションコンサルタントの田上です。
近年、GitHub Copilot をはじめとしたAIコーディングの活用は急速に進んでいます。しかし実務の現場では、次のような課題に直面するケースが少なくありません。
- 同じ要件でもAI生成コードの品質にばらつきがある
- AIの活用が個人依存となり、チームとして再現性が確保できない
- フレームワークやコンポーネントの正しい使い方が担保されない
- UI品質（デザイン・一貫性）が崩壊してしまう
つまり、AIコーディングは「便利」ではあるものの、企業の開発プロセスとしては未成熟であることが多いのが現状です。
本記事では、この課題に対するアプローチとして、
- GitHub Copilot の Agent Skills（SKILL.md）
- Ignite UI for Angular の公式スキル（Skills）
- MCP（Model Context Protocol）によるテーマ制御
を組み合わせ、Ignite UI に準拠したグリッドの追加とダークモードの実装について、簡単なプロンプト指示を元に「AIエージェントで自動コーディング」する方法について解説します。
- 1. なぜ今「スキル（SKILL.md）」が重要なのか
- 2. Ignite UI スキル の設定方法
- 3. 実践：Grid（ソート/フィルタ/ページング）をAIで実装する
- 4. 実践：ダークモード（切り替えボタン）をAIで実装する
- 5. 実践：Copilot コーディングのイメージ
- 6. ハルシネーションとの向き合い方
- 7. 本記事のまとめ
1. なぜ今「スキル（SKILL.md）」が重要なのか
AIコーディングの本質的な問題は、プロンプト依存にあります。
GitHub Copilot は非常に強力ですが、
- AIに対するプロンプト（テキスト指示の仕方）
- AIエージェントとの過去の会話（セッション内で学習した内容）
- プロジェクト構成（現在のリソースの状況）
といった要素に強く依存するため、プロンプト指示によってAI生成の結果が変わるという特性があります。
この状態では、
「AIに自動実装させているが、コーディング結果は"人間（の指示）に依存"する」
という状況から抜け出すことができません。
AIエージェントをコーディング規約に従わせる「スキル（SKILL.md）」
Agent Skills は、AIに対して
- 実装ルール
- 設計指針
- ベストプラクティス
を構造化されたナレッジとして与える仕組みです。これにより、AIは単なる補助ツールではなく、
組織のルールに従って動作する“開発エージェント”
へと進化します。
2. Ignite UI スキル の設定方法
Ignite UI スキル × MCP に対応しているフレームワーク
例）Ignite UI for Angular スキル × MCP の使い方
Ignite UI for Angular スキルは、Copilotに対して
- Ignite UI コンポーネントの正しい使い方（Grid / Chart / Layout など）
- コーディング手順
- 推奨パターン
つまり、「AIコーディングの標準手順書」そのものをAIに読み込ませる仕組みを提供しています。
Copilot に Ignite UI スキルを読み込ませてみよう
GitHub Copilot（VSCode）へのスキル読み込み手順は、とてもシンプルです。
Step 1. プロジェクト ルートに .github/copilot-instructions.md を作成してください。
Step 2. copilot-instructions.md ファイルの内容
# Copilot Instructions This project uses Ignite UI for Angular. Follow the guidelines in the skill files below: - Components & Layout: https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-components/SKILL.md - Data Grids: https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-grids/SKILL.md - Theming & Styling: https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md
Step 3. プロジェクト ルートに .vscode/mcp.json を作成してください。
{ "servers": { "igniteui-theming": { "command": "npx", "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] } } }
この設定により、AIは定義されたルールに従って生成するようになります。
3. 実践：Grid（ソート/フィルタ/ページング）をAIで実装する
それでは早速、GitHub Copilot を活用して、AIコーディングしてみましょう。
Step 1. アプリに Grid を追加してみよう
今回、AIエージェントには下記の機能要件を満たすデータグリッドの生成を指示します。
- ソート
- フィルタ
- ページング
Step 2. プロンプト入力による指示
GitHub Copilot の「Generate モード」で下記のプロンプトを入力します。
今回の例は検証目的のため、細かい注意ポイントを明示的にプロンプトに盛り込んでいますが、実際にコーディングする際は、もっと簡易な自然言語で指定可能です。
# セッション冒頭での宣言（Copilot / Agent に貼る） 前提確認: 1. スキル有効化: - .github/copilot-instructions.md に記載された URL を参照すること 2. バージョン: - package.json は @infragistics/igniteui-angular 21.0.0 を使用 3. 重要: - 公式スキル（SKILL.md）は igniteui-angular の master ブランチ向け - 21.0.0 との差異は「ng build」で必ず検証し、NG build をハルシネーション検出に使う 実装フロー: STEP 1: ソート・フィルタ・ページングの3機能を持つGridを実装してください STEP 2: スキルの正しい参照先を特定（igniteui-angular-grids の skill） STEP 3: コード生成（skill の推奨パターンを拝借） STEP 4: ng build で検証（警告/エラーをゼロに近づける） STEP 5: ng serve で動作確認（実操作で確認）
実装結果：Ignite UI for Angular スキルにより Grid が実装された
4. 実践：ダークモード（切り替えボタン）をAIで実装する
Step 1. アプリにダークモードを追加してみよう
AIエージェントにはダークモードの生成を指示します。
- トグルボタン追加（ダークモード切替）
Step 2. プロンプト入力による指示
同様に、GitHub Copilot の「Generate モード」で下記のプロンプトを入力します。
今回の例は検証目的のため、細かい注意ポイントを明示的にプロンプトに盛り込んでいますが、実際にコーディングする際は、もっと簡易な自然言語で指定可能です。
# コーディング指示②（Ignite UI Theming MCP） Ignite UI Theming MCP を使って、 ヘッダーにダークモードを切り替えるボタンを追加してください。 手順: 1. detect_platform 2. existing の src/styles.scss を確認して現在のテーマ構成を要約 3. create_palette でダーク用パレットを生成 - primary: #2563eb（ライトと同じ） - surface: #0f172a（ダーク用） 4. src/styles.scss に .dark-theme クラスとして追加 - ライトテーマは既存のまま維持 - ダークテーマは .dark-theme セレクタにスコープ 5. ng build で検証 制約: - licensed package: @infragistics/igniteui-angular 21.0.x - Fluent スキーマを維持すること - ファイル編集前に使う MCP 操作名を列挙すること - 現在のライトテーマは絶対に壊さないこ
実装結果：MCPサーバー経由でダークモードが実装された
5. 実践：Copilot コーディングのイメージ
参考までに Copilot での Grid 追加コーディングの様子を掲載しています。
6. ハルシネーションとの向き合い方
重要な点として、スキルを導入しても
ハルシネーションは完全には排除できません。
実際の検証でも、
- 存在しないプロパティの提案
- バージョン差異による不整合
が一部発生しました。
しかし、ここでの本質は、
「誤りをゼロにすること」ではなく「誤りを検知・制御できること」
です。
本記事のアプローチでは、
- スキル（SKILL.md）により「誤りの発生範囲」を限定
- ng build により「構文・依存関係の誤り」を即時検出
- ng serve により「UI・挙動の誤り」を実操作で確認
という3段階の検証を設実施計しています。
これにより、
AIの出力を“そのまま信じる”のではなく、“検証前提で扱う”開発プロセス
へと転換することができます。
7. 本記事のまとめ
本記事では、GitHub Copilot × Ignite UI Skills × MCP を組み合わせ、
- Grid（ソート / フィルタ / ページング）
- ダークモード（テーマ切替トグルボタン）
といった実装を、AIエージェントによって自動生成しました。
ポイントは以下の通りです。
- Grid は Ignite UI スキルをベースに実装することができた
- 機能要件（ソート / フィルタ / ページング）を短時間で満たすことができた
- Theming は MCP サーバー経由で生成・反映し、ライトテーマを壊さずにダークモードを追加できた
まずは本記事のプロンプトをそのまま試してみてください。
Ignite UI スキルを使うことで、GitHub Copilot でのAIコーディング作業が、驚くほど自動化できることを体感できます。
関連ブログの紹介
無料トライアルのご案内
こちらからトライアルへご参加できます。
- 【製品】無料トライアル https://jp.infragistics.com/free-downloads
無料相談会のご案内
専門コンサルタントが直接ご質問にお答えし、貴社に最適な導入方法をご提案します。
