社内にもCopilot Agentの風が強く吹き始めている今日この頃。
流行りに乗って私も何か活用してみようということで、面倒に感じていたコミット前の差分の確認やコミットメッセージの考案をpromptsとskillsを使って自動化してみました！
前提
- Reactを使ったフロントエンド開発における話になります。他の言語でも仕組みの作り方については、流用できるかと思います。
- 運用初期段階のため、改善の余地は残っています。
skillsとpromptsの違い
そもそもskillsって何？promptsって何？という方は、以下の記事がわかりやすくまとまっているので、ぜひご一読ください！
GitHub Copilot の Instructions / Skills / Custom Agents / Hooks の違いを整理してみた
私のざっくりとした理解は以下です。
- prompts
再利用できるプロンプトをファイル化したもの。自動化したい「手順」を主に定義し、明示的に呼び出して使うもの。 - skills
繰り返し使う能力をファイル化したもの。Copilotに参照してほしい「ルールや判断基準」を定義する。タスクに合えば自動で読み込まれるが、確実に使用したい場合には、prompts内やチャット内で明示的に呼び出して使うこともできる。
Reactで言うと、skillsが子コンポーネントでpromptsが呼び出し元の親コンポーネントのようなイメージ？で、skillsに繰り返し使いたい部品を定義しておき、promptsでその部品を呼び出して手順を組み立てるという使い方をしています。
skillsで作るレビュー資産
特にレビュー用途では、この分け方が相性が良いと感じました。
まず観点ごとに skills を作ります。Copilotに頼めば、いい感じにベースを作ってくれます。
今回は、以下の4観点で作ってくれました。
- review-security: セキュリティ
- review-bug-logic: バグ、分岐、状態遷移、汎用パフォーマンス
- review-responsibility-readability: 責務分離と可読性
- review-spell-terminology: 命名、表記、用語整合
その上でレビューのルールを定義するskills（今回はreview-runnerと命名）を作成します。
これもCopilotに頼んで、先ほど作成したskillsを呼び出す形で作成してもらいます。
この構成にするメリットは以下です。
- 観点の追加や差し替えがしやすい
- レビュー資産を再利用できる
- 必要な観点だけ呼び出せるので、トークン消費が節約できる
特にレビュー観点は、運用していく中で微調整を繰り返し育てていくものなので、独立したskillsとすることでかなり管理しやすくなるかと思います。
実際に使っているprompts
いま使っている主な構成は次のとおりです。
.github/
prompts/
commit-prepare.prompt.md ←コミット前レビュー自動化の本体
skills/
review-runner/ SKILL.md ←前章で作成したレビュー用ランナー
review-security/ SKILL.md ←これより下：レビュー観点skills
review-bug-logic/ SKILL.md
review-responsibility-readability/ SKILL.md
review-spell-terminology/ SKILL.md
review-html-css/ SKILL.md
a11y/ SKILL.md
react-best-practices/ SKILL.md
state-management/ SKILL.md
prompts
- commit-prepare.prompt.md
git diff --cached (ステージングされた差分)を見てreview-runnerを実行し、重大指摘の自動修正とレビュー結果を出力する。また、コミットメッセージも提案する。
---
name: commit-prepare
description: コミット前の最終チェック
agent: agent
tools:
- edit/editFiles
- execute/runInTerminal
---
ステージ済みの差分（`git diff --cached`）を対象に、以下の手順を順番に実行してください。
## Step 0 — 事前確認
- `git` が利用可能か確認する（`command -v git`）
- `git --version` で実行環境を確認する
- 使用コマンドと取得対象を先に短く宣言してから本処理に進む
## Step 1 — 品質レビュー
`git diff --cached` で取得した差分を入力として、`review-runner` スキルを呼び出して品質レビューを実施してください。
実施要件：
- 必須4観点（セキュリティ、バグ/論理、責務分離/可読性、スペル/用語整合）を毎回実施
- 差分内容に応じて追加観点（HTML/CSS、a11y、React/Next.js、状態管理）を選定
- 指摘は `review-runner` の出力フォーマットに従って重要度別に出力
- 観点別の指摘なし結果と件数サマリーを必ず出力
---
## Step 2 — 自動修正
CRITICAL / HIGH の指摘があれば、該当ファイルを修正してください。
修正した箇所を一覧で報告してください。
修正が不要な場合は「修正対象なし」と出力してください。
---
## Step 3 — コミットメッセージの提案
差分の内容（修正後）をもとに、以下のルールでコミットメッセージを **3 案** 提案してください。
ルール：
- `<type>: <subject>` の形式（Conventional Commits）
- type は `feat` / `fix` / `update` / `refactor` / `docs` / `chore` / `test` のいずれか
- subject は命令形・現在形・50 文字以内
- 日本語
- 差分に複数の独立した変更が含まれる場合は、主要な変更を `と` や `+` でつなぎ **両方** を subject に含める（例: `fix: ログイン処理修正 + エラーメッセージ改善`）
- 1つの変更しか含まれない場合は単独で記述する
出力形式：
案1: Update: node.js 24系にバージョンアップ
案2: ...
案3: ...
skills
- review-runner/ SKILL.md
前章で作成した、個々のレビュー観点skillsを呼び出す、レビューランナーです。自動化したい手順の中にレビューがある場合には、promptsからこのskillsを呼び出します。
---
name: review-runner
description: 差分レビューやコードレビューを実行する統合スキル。必須4観点（セキュリティ、バグ/論理、責務分離/可読性、スペル/用語整合）を毎回実施し、必要に応じて追加観点を選定して指摘をまとめる。
---
# Review Runner
対象差分や対象コードに対して、レビュー観点の選定と観点別レビューを統合して実行する。
## 入力
- 対象 diff（必須）
- 対象ファイル一覧（必須）
- 任意の重点観点（任意）
## 必須観点
次の4観点は毎回実施する。
- セキュリティ（review-security）
- バグ/論理・汎用パフォーマンス（review-bug-logic）
- 責務分離/可読性（review-responsibility-readability）
- スペル/用語整合（review-spell-terminology）
## 追加観点の選定
差分内容に応じて追加観点を選ぶ。
- HTML / JSX / TSX の変更: review-html-css + a11y
- CSS / SCSS / CSS-in-JS の変更: review-html-css
- UI コンポーネント、フォーム、ナビゲーション変更: a11y
- React/Next.js の描画やデータ取得変更: react-best-practices
- Context、グローバル state、キャッシュ変更: state-management
## 実行手順
1. 必須観点4つを実施し、指摘有無を明記する
2. 差分内容に応じて追加観点を実施する
3. すべての指摘を重要度別に整理する
4. 観点別の指摘なし結果も明示する
## 出力フォーマット
🍓 [CRITICAL] / 🍊 [HIGH] / 🍋 [MEDIUM] / 🐬 [LOW]
カテゴリ: セキュリティ / バグ / パフォーマンス / 責務 / 可読性 / スペル / HTML / CSS / a11y
場所: path/to/file.ext:line
問題: 何が問題か
根拠: どの差分から判断したか
改善案:
<修正コード>
観点別の最終行を必ず含める。
- セキュリティ: 指摘なし / n件
- バグ/論理: 指摘なし / n件
- 責務分離/可読性: 指摘なし / n件
- スペル/用語整合: 指摘なし / n件
- 追加観点: 指摘なし / n件
- review-security/ SKILL.md
review-bug-logic/ SKILL.md
review-responsibility-readability/ SKILL.md
review-spell-terminology/ SKILL.md
前章で作成した、汎用的な4観点のskills。
- review-html-css/ SKILL.md
a11y/ SKILL.md
react-best-practices/ SKILL.md
state-management/ SKILL.md
適宜呼び出す、追加観点のskills。
自作だけではなく、有識者の作成したskills集であるAwesomeGitHubCopilotや各社公式が出しているskillsを活用すると良いです。
使っているor気になっている公式skills
使ってみて
今回の続きで、以下のskillsも作成して、実際の開発時に活用してみています。
- mr-prepare.prompt.md: ベースブランチとの差分をレビューし、MR説明文まで生成
- mr-review.prompt.md: MR番号から差分を取得し、レビュー。指摘内容をコメント形式でまとめて出力。
- mr-rereview.prompt.md: レビューコメントと対応コミットを照合し、対応済みか判定
- mr-fix-comments.prompt.md: 最新レビューコメントを取得し、指摘された箇所を自動で修正
便利ではあるものの、差分の取得に時間がかかるし、トークン消費量もまあまあ多いので、まだまだ改善の余地がありそうです。
そもそもGitHubでは、直接レビュアーにCopilotを指定できる機能があったりして、こんな手動での仕組み作りもすぐにいらなくなる気もしています。
ただ、会社の導入状況によってそういった最新機能を使えない場合もあるので、隙間時間を見つけて自分なりに効率化していきたい所存です。