概要
Claude Code で導入された「Skills」機能を VS Code で再利用できるようになりました。
ClaudeCode での Skills 機能と Github Copilot のカスタムエージェント
ちょっと今いちわからなかったのでここは ClaudeCode でもない、Github Copilot でもない Gemini さんに聞いてみよう。
利用方法
設定を有効化
VS Code の settings.json より、chat.useClaudeSkills を有効化する必要があります。（デフォルトでは無効になっていました。）
スキルの配置場所
- 個人スキル:
~/.claude/skills/skill-name/SKILL.md - プロジェクトスキル:
${workspaceFolder}/.claude/skills/skill-name/SKILL.md
SKILL.md ファイルの要件
- ヘッダーに
description属性が必要(スキルの説明) -
allowed-tools属性は VS Code ではサポートされていない
ClaudeCode での Skills
ClaudeCode での Skills の 利用は Plugin としてインストールすることで利用可能となっています。
~/.claude/plugins/marketplaces/anthropic-agent-skills/skills/を確認すると次の通りインストールされていることが確認できます。
今回は、GitHub Copilot で Claude Skills を使ってみることが目的となりますので、ClaudeCode での説明はここまでとします。
GitHub Copilot で Skills を使ってみる
ClaudeCode は利用できない方のために、ここでは GitHub Copilot しか使えないことを前提に説明します。
【ClaudeCode での Skills】は以下の Git で公開されているもののようです。
これらを、個人スキルの ~/.claude/skills に配置しておきましょう。
example-skills パッケージ (11個)
| # | スキル名 | カテゴリ | 説明 |
|---|---|---|---|
| 1 | algorithmic-art | 🎨Creative & Design | p5.jsで生成アート作成(シード付きランダム、フローフィールド、パーティクルシステム) |
| 2 | canvas-design | 🎨 Creative & Design | デザイン哲学に基づくPNG/PDF形式のビジュアルアート作成 |
| 3 | slack-gif-creator | 🎨 Creative & Design | Slackのサイズ制約に最適化されたアニメーションGIF作成 |
| 4 | artifacts-builder | 💻 Development & Technical | React + Vite + Tailwind CSS + shadcn/uiで複雑なHTML artifact構築 |
| 5 | mcp-builder | 💻 Development & Technical | 高品質なMCPサーバー作成ガイド(外部API統合) |
| 6 | webapp-testing | 💻 Development & Technical | Playwrightを使ったローカルWebアプリケーションのUIテスト |
| 7 | frontend-design | 💻 Development & Technical | フロントエンドデザイン支援 |
| 8 | brand-guidelines | 🏢 Enterprise & Communication | Anthropicの公式ブランドカラーとタイポグラフィを適用 |
| 9 | internal-comms | 🏢 Enterprise & Communication | 社内コミュニケーション文書作成(ステータスレポート、ニュースレター、FAQ) |
| 10 | theme-factory | 🏢 Enterprise & Communication | 10種類のプリセットテーマまたはカスタムテーマでartifactスタイリング |
| 11 | skill-creator | 🛠️ Meta Skill | 新しいスキル作成のためのインタラクティブガイド(Q&A形式) |
document-skills パッケージ (4個)
| # | スキル名 | 説明 | 主要機能 |
|---|---|---|---|
| 12 | docx | Word文書の作成・編集・分析 | 変更履歴、コメント、書式保存、テキスト抽出 |
| 13 | PDF操作ツールキット | テキスト・表抽出、PDF作成、結合・分割、フォーム処理 | |
| 14 | pptx | PowerPointプレゼンテーション | レイアウト、テンプレート、グラフ、自動スライド生成 |
| 15 | xlsx | Excelスプレッドシート処理 | 数式、書式設定、データ分析、可視化 |
既存の Skills を利用してみる
pdf の Skills を試してみます。下記の通り、pdf の SKILL.md の descriptionを理解し呼び出してくれました。
成果物は以下の通りです。
本検証は、Claude Sonnet 4.5 で試した結果です。
Claude Haiku 4.5 では Skills を呼び出してくれなかったため、呼び出してくれるかはモデル次第です。
また、Claude Haiku 4.5 で明示的に Skills を使用するように指示した場合でも上手く利用してくれませんでした。
独自の Skills を利用してみる
まず、skill-creator で 独自の Skills を作成させます。
中身はともかくとりあえず、engineering-blog-evaluator という Skills ができたと思ってください。
1 個前の記事で書いた CloudWatch Log Management: ログ管理 これからは 1 箇所で OK! を評価させてみます。
画面は一部ですが結果は以下の通り、SKILL.md の内容に沿って評価を返してくれています。
なんか、人事評価を AI に評価してもらうような Skills はどうかな。とは言ってもモデル次第であるところはあるので参考程度だとは思いますが、エンジニアの評価って非エンジニアの人がすると正当な評価をされないこともあるので一つのツールとして。