はじめに
Github Copilotに追加された「エージェントスキル」について調べ、実際にスキルを動かしてみました。
エージェントスキルとは？
エージェントスキルとは、自然言語で呼び出される、プロジェクトまたはエンジニア個人固有の「タスクの実行方法の指示」を定義することができる機能です。
これを使うことによって、特定のタスクを繰り返し依頼したい場合に、毎回同じやり方でタスクをこなしてもらうことを目的としています。
エージェントスキルに含まれるもの
Copilotでエージェントを使用するには
.github/skills/{スキル名}
ディレクトリを作り、その配下に必要なファイルを配置します。（
.claude/skills
でも可）
なお、個人専用のスキルは
~/.copilot/skills
または
~/.claude/skills
配下に作成します。
- SKILL.md（必須）
スキルの内容（指示）を書くファイルです。以下の内容を含めます。- name：スキル名（スキルID）
- description：スキル機能と、Copilotがいつそのスキルを使用するかについての説明
- ライセンス
- 指示の本文
その他にも、以下のようなディレクトリを作成して、SKILL.md から参照させることができます。これらは決まりではありませんが、今の所慣習としてこのようになっているようです。
- 参照ファイル（referencesディレクトリ配下）
SKILL.md には書ききれない、詳細な指示をMarkdown形式で記載します。
SKILL.mdからはSee [references/framework-fixes.md](references/framework-fixes.md) for details.のように参照させることができます。 - スクリプト（scriptsディレクトリ配下）
pythonファイルやshファイルなどを配置することで、これらのスクリプトを実行することができます。 - テンプレートファイル（templatesディレクトリ配下）
これらを配置すると、エージェントモードでタスクを与えたときに、それに対応するスキルがあるかどうかを確認し、適切なスキルが選択されてタスクを処理するようになります。
スキルをトリガーするには、SKILL.mdのdescriptionの書き方次第なので、うまくトリガーしない場合にはdescriptionの見直しが必要です。
カスタムエージェント・カスタムインストラクションとの違い
まず、カスタムエージェントとスキルとの違いですが、どちらも「エージェントを専門処理に特化させる」という似たような目的を持っています。
しかし明確に異なると感じるのは、カスタムエージェントは「指示を与える際にユーザが選択するもの」で、スキルは「自然言語によって自動的にトリガーされるもの」だという点です。
また、カスタムエージェントとスキルを組み合わせて使うことはできますが、指示の優先度としては、カスタムエージェントの方が強くなっています。
例えば、Agentモードで「このアプリのソースコード構成をExcalidraw diagramsで書いて欲しい」と指示すると、ソースコードを分析し、ダイアログラムを出力してくれますが、Planモードで同じ指示を出すと、スキルの参照はしますが「ファイルの編集は行ってはいけない・あくまで計画を立てる」というPlanモードの指示が優先されます。
次に、カスタムインストラクションとの違いですが、カスタムインストラクションは常に指示に含まれますが、スキルは必要に応じてトリガーされます。
カスタムインストラクションをスキル的な使い方をすることもできそうですが、コンテキストが大きくなりがちだと思います。
スキルは、必要にときにしか参照しないため、ある特定タスクの時だけ参照させたい、という使い方にはスキルの方が適しています。
事前準備
VSCodeでの設定有効化
VSCodeでのエージェントスキル機能はまだ実験的機能のため、設定をオンにしておく必要があります。
設定の
Chat: Use Agent Skills
にチェックを入れておきます。
スキルファイルの配置
.github/skills/{スキル名}
ディレクトリを作成し、配下に SKILL.md をはじめとしたファイルを配置します。なお、ディレクトリの
{スキル名}
の部分は、 SKILL.md 内の name と同じである必要があります。
実践
今回はawesome-copilotで公開されている2つのスキルを試してみます。
Web Design Reviewer
このスキルは、playwright を使用して localhost で起動しているサイトを自動的に巡回し、以下のような観点でデザインのレビューをします
- レイアウトの問題（要素の重なりなど）
- レスポンシブの問題（PC・も入るなどの各ビューポートでのレイアウト崩れなど）
- アクセシビリティの問題（コントラストなど）
- 見た目の一貫性（フォント、色、間隔の不一致）
このスキルをトリガーするには「http://localhost:5173 にアクセスして WEBデザインレビューをして」といった指示を与えます。
そうすると、playwright を使用してWEBサイトを巡回し、レビューと修正を実行します。
Excalidraw Diagram Generator
このスキルは、指示に基づいて調査を行い、その結果を excalidraw 形式の図で出力します。
以下のような図に対応しています。
- フローチャート
- リレーションシップ図
- マインドマップ
- アーキテクチャ図
- データフロー図
- ビジネスフロー
- クラス図
- シーケンス図
- ER図
ユーザの指示をもとに、適切な図を選択し、 excialidraw 形式のファイルを出力します。（ちなみに、VSCodeではexcialidrawプラグインを入れることで、図を閲覧することができます。）
このスキルをトリガーするには、例えば「このプロジェクトのアーキテクチャを調査して、図を出力して」と指示します。
さいごに
スキルを実際に使ってみて、同じタスクを何度も実行したい場合に、その実行方法を記述しておくことで、再利用性を高めることができる機能だということだと理解できました。
おすすめ書籍
