Skill を管理する "Agent Skill Ninja" MCP 対応 VS Code 拡張機能作ってみた⚡

こんにちは、年末年始も VS Code と戯れていたアーキテクトのやまぱんです 😊
補足コメントや質問、いいね、拡散、ぜひお願いします 🥺！
間違っていたら 優しく 教えてください！

TL;DR

• 以前作った skill-finder が VS Code 拡張機能 Agent Skill Ninja に進化しました
• 年始休みの 2 日間で Claude Opus 4.5 と開発。まだまだ改善中ですが、引き続きアップデートしていきます
• 100+ のプリセットスキルをキーワード検索でワンクリック追加
• マルチツール対応: AGENTS.md / copilot-instructions.md / CLAUDE.md / Cursor / Windsurf / Cline のインストラクションファイルを自動更新（オフにもできます）
• MCP ツール連携で Agent Mode からも利用可能

🎉 VS Code Marketplace で公開中！

skill-finder を作ったけど...

以前、「🔥 はじめての Agent Skills 🔥 12 選＆リポジトリ一覧！」という記事で Agent Skills を紹介しました。

その後、「スキルを探すためのスキル」として skill-finder を作りました。

参考: 「スキルを探すスキル」skill-finder を Skill Creator で作ってみた！

skill-finder は SKILL.md ベースのエージェントスキルで、スキルを検索・インストールできる便利なツール(エージェントスキル)でした。

使っていくうちに不満が。。。

• セットアップが面倒: .github/skills/ にファイルを配置
• 呼び出しが不安定: でもそれだけじゃ SKILL.md への参照がうまく認識されないことがあった
  　 → インストラクションファイルに直接書いたほうがいいじゃん、でも管理面倒だな～

Before / After 比較

項目	Before（skill-finder）	After（Agent Skill Ninja）
ツール導入	.github/skills/ に手動配置＆参照追記	拡張機能インストールだけ
スキル検索	ターミナルで Python 実行(エージェントが実行＆読み取りはする)	GUI or Copilot Chat で検索
スキル追加	ファイルコピー（都度）	ワンクリック
インストラクション更新	手動で AGENTS.md 編集	自動で追記・削除
MCP 連携	なし	Agent Mode で 8 ツール利用可

「これ、VS Code 拡張機能にしたほうが良くない？」 🤔

そう思ったのがきっかけです！
AI でなくていい部分には AI を使わない！

🥷 Agent Skill Ninja とは？

Agent Skill Ninja は、AI コーディングアシスタント向けのエージェントスキル管理ツールです。

対応ツール

ツール	出力先
GitHub Copilot	AGENTS.md / copilot-instructions.md
Claude Code	CLAUDE.md
Cursor	.cursor/rules/
Windsurf	.windsurfrules
Cline	.clinerules

ツールを自動検出して、適切なフォーマットでインストラクションファイルを更新してくれます。

できること

• スキル検索: 100+ スキルをキーワード検索（ローカル＆GitHub）
• ワンクリックインストール: .github/skills/ に配置 & 削除したら連携して削除
• インストラクションファイル自動更新: スキル追加したら自動で反映
• MCP ツール連携: Agent Mode で 8 つのツールが自動利用可能
• Copilot Chat 連携: @skill コマンドで操作
• GitHub でスキル検索: Web 検索で新しいスキルを発見
• スキルソース追加: 好きなリポジトリをソースとして登録
• ローカルスキル管理: SKILL.md 自動検出
• 日本語 / 英語 UI 対応

✨ 推しポイント 4 選

1. インストラクションファイル自動更新

これが一番便利だと思います！

スキルをインストールすると、インストラクションファイル（AGENTS.md など）に自動でスキル情報が追記されます。

<!-- skill-ninja-START -->

## Installed Skills

| Skill                                            | When to Use            |
| ------------------------------------------------ | ---------------------- |
| [azure-env-builder](.github/skills/.../SKILL.md) | Azure 環境構築時に使用 |
| [mcp-builder](.github/skills/.../SKILL.md)       | MCP サーバー構築時     |

<!-- skill-ninja-END -->

v0.3.3 からテーブル形式に対応！ SKILL.md の ## When to Use セクションから用途を自動抽出してくれます。

毎回パスをコピペする必要がなくなりました。

対応フォーマット：

• Markdown: AGENTS.md, CLAUDE.md, copilot-instructions.md
• Cursor Rules: .cursor/rules/
• Windsurf Rules: .windsurfrules
• Cline Rules: .clinerules

2. 厳選されたスキルソースをプリセット

「どのリポジトリにスキルがあるの？」 という問題を解決！

Agent Skill Ninja は、有名＆良質なリポジトリをデフォルトのスキルソースとして登録済みです。インストールした瞬間から 100+ のスキルが使えます！

npm みたいに、キーワードを入れるだけでスキルを検索できます！

🧑 検索: "azure"

🔍 検索結果:
├─ azure-env-builder (aktsmm) ⭐ 信頼度: Community
├─ azure-mcp (anthropics) ⭐ 信頼度: Official
└─ bicep-helper (community) ⭐ 信頼度: Curated

プリセットで含まれるスキルソース：

• 🏢 Official: anthropics/skills, github/awesome-copilot
• 📋 Curated: ComposioHQ/awesome-claude-skills
• 👥 Community: obra/superpowers, muratcankoylan/Agent-Skills-for-Context-Engineering など

さらに、GitHub 検索でスキルを探して追加したり、見つけたリポジトリをスキルソースとして登録することもできます。自分だけのスキルコレクションを作れるのがポイントです！

3. MCP ツール連携

GitHub Copilot の Agent Mode で、MCP ツールとして自動利用できます！

この画面では以下がすべて確認できます：

• 左: 拡張機能のサイドバー（リモートスキル一覧、✓ はインストール済み）
• 中央: AGENTS.md にスキルが自動反映されている
• 右: GitHub Copilot Chat から AGENTS.md が参照され、拡張機能の MCP ツールが使われている様子

💬 「Azure 関連のスキルを探して」
   → #searchSkills が自動で呼ばれて検索結果を表示

💬 「bicep-mcp をインストールして」
   → #installSkill でインストール、インストラクションファイルも自動更新

利用可能なツール：

ツール	説明
#searchSkills	スキル検索
#installSkill	スキルインストール
#uninstallSkill	スキルアンインストール
#listSkills	インストール済みスキル一覧
#recommendSkills	プロジェクトに合ったスキルをおすすめ
#updateSkillIndex	インデックス更新
#webSearchSkills	GitHub でスキル検索
#addSkillSource	スキルソース追加

4. 信頼度バッジ

「このスキル、信頼できるの？」がひと目でわかります！（ただしあくまで目安です）

バッジ	意味	例
🏢 Official	公式（Anthropic / GitHub）	anthropics/skills
📋 Curated	キュレーション済み	awesome-claude-skills
👥 Community	コミュニティ	個人リポジトリ

安心してスキルを選べますね。

🛠️ 開発裏話: たった 2 日間で作った話

Claude Opus 4.5 との共同開発

この拡張機能、年始の 2 日間（1/2〜1/3） で作りました！

Claude Opus 4.5 にめちゃくちゃ助けてもらいました。TypeScript での VS Code 拡張機能開発は初めてだったんですが、「こういう機能が欲しい」と伝えるだけでガンガン実装してくれました。

苦労したポイント: GitHub 検索 API の落とし穴

本筋ではないのに一番ハマったのが GitHub Code Search API でした。
いろいろ試行錯誤しました。検索の精度とパフォーマンスを両立するのって難しいなと思いました。

落とし穴: OR クエリなのに 0 件になる

GitHub の検索 API は、azure OR env OR ocha のような OR クエリでも、存在しない単語が 1 つでもあると全体が 0 件になることがあります。

NG："azure OR env OR ocha" → 0件（"ocha" がヒットしない）
OK： "azure OR env" → 正常にヒット

解決策: フォールバック検索

0 件のときはキーワードを 1 つずつ減らして再検索するロジックを入れました。

パフォーマンス改善: 並列処理で 40% 高速化

もう 1 つの課題は検索速度でした。

• Before: 直列フェッチ → 768ms
• After: 並列フェッチ → 460ms（約 40% 高速化）

Promise.all でバッチ処理するだけで、体感速度がかなり変わりました。

初めての VS Code 拡張機能開発で学んだこと

学び	内容
多言語対応	package.nls.json + vscode.env.language で自動切替
MCP Tools	Language Model Tools API で Agent Mode 対応

2 日間で形にできたのは Claude のおかげですが、細かいバグ修正やパフォーマンス改善は後から地道にやりました。

🚀 インストール・使い方

インストール

VS Code の場合

VS Code Marketplace からインストールできます：

# コマンドパレット（Ctrl+Shift+P）から
ext install yamapan.agent-skill-ninja

# または、ターミナルから
code --install-extension yamapan.agent-skill-ninja

または、拡張機能パネル（Ctrl+Shift+X）で「Agent Skill Ninja」を検索してください。

MCP ツール連携を有効にする（Agent Mode）

GitHub Copilot Chat の Agent Mode で MCP ツールを使うには、VS Code の設定で有効化が必要です：

1. Ctrl+, で設定を開く
2. chat.mcp.enabled を検索
3. チェックを入れて有効化

これで Copilot Chat から #searchSkills や #installSkill などのツールが使えるようになります。

GitHub Copilot Chat のツールボックス（🔧 アイコン）からも、ツールごとにオン/オフを切り替えられます：

自然言語でも OK！
「Azure 関連のスキルを探して」のように話しかけるだけで、エージェントが自動的にこの拡張機能のツールを使ってくれます（以前の skill-finder と近い動きですね 😊）。

Cursor など Marketplace 非対応の場合

Cursor は VS Code ベースですが、Microsoft Marketplace への直接アクセスが制限されています。そのため、GitHub Releases から .vsix ファイルをダウンロードしてインストールします：

1. GitHub Releases から最新の .vsix ファイルをダウンロード
2. Ctrl+Shift+P → Extensions: Install from VSIX...
3. ダウンロードした .vsix ファイルを選択

⚠️ GitHub Token の設定（重要）

GitHub 検索を使うには GitHub Token が必要です！ 未設定だと API レート制限（60 リクエスト/時間）にすぐ引っかかって検索が失敗します。

設定方法：

1. GitHub CLI を使う（おすすめ）: gh auth login で認証済みなら自動取得
2. 手動設定: VS Code 設定 → skillNinja.githubToken にトークンを入力

トークン作成: https://github.com/settings/tokens/new?description=Agent%20Skill%20Ninja&scopes=repo,read:org

基本的な使い方

コマンドパレットから

1. Ctrl+Shift+P でコマンドパレットを開く
2. 「Agent Skill Ninja: Search Skills」を選択
3. キーワードを入力（例: azure, git, pdf）
4. スキルを選択 → Install / Preview / Favorite

Copilot Chat から

@skill /search MCP server      # スキル検索
@skill /install github-mcp     # スキルインストール
@skill /list                   # インストール済み一覧
@skill /recommend              # プロジェクトに合ったおすすめ

サイドバーから

アクティビティバーの 🥷 アイコンをクリックすると、サイドバーが開きます。

• Workspace Skills: インストール済み＆ローカルスキル一覧
• Remote Skills: リモートスキル一覧（お気に入り、ソース別）

おすすめ設定

設定	説明	デフォルト
skillNinja.autoUpdateInstruction	インストール時にインストラクションファイルを自動更新	true
skillNinja.instructionFile	インストラクションファイルの形式	AGENTS.md
skillNinja.includeLocalSkills	ローカルスキルも含める	true
skillNinja.language	UI 言語（auto / en / ja）	auto

まとめ

skill-finder から Agent Skill Ninja への進化、いかがでしたか？

• npm みたいにスキルを検索・インストール
• インストラクションファイルを自動更新
• MCP ツール連携で Agent Mode からも利用可能
• 信頼度バッジで安心してスキルを選べる

初めての VS Code 拡張機能開発でしたが、Claude Opus 4.5 のおかげで 2 日間で形になりました。

ぜひ使ってみてください！フィードバックや Issue / PR も大歓迎です 🙌

GitHub リポジトリに ⭐ をつけてもらえると励みになります！

参考

• Agent Skill Ninja（VS Code Marketplace）

• Agent Skill Ninja（GitHub リポジトリ）

• 🆕 MCP サーバー版も公開中！
  VS Code 以外の環境（Claude Desktop、Cursor など）でも使えます。
  140+ のプリインストール済みスキルを検索・インストール可能です。
  • npm install -g skill-ninja-mcp-server → グローバルインストール
  • npx skill-ninja-mcp-server → npx で直接実行

• skill-finder の記事（前回）

• はじめての Agent Skills 12 選＆リポジトリ一覧！