
vercel-labs/skillsでGitHubにあるClaude Codeのスキルを簡単に追加してみた
Claude Codeのスキル(SKILL.md)は、AIエージェントにカスタム機能を追加できる便利な仕組みです。自分でスキルを作るのも楽しいですが、すでに誰かが作ったスキルを手軽に活用できたらもっと嬉しいですよね。
そんなニーズに応えてくれるのが vercel-labs/skills です。スキルのインストール・管理を統一的に行えるCLIツールで、Claude Codeをはじめとする40以上のAIエージェントに対応しています。試してみたので紹介します。
弊社ブログでもClaude Codeのスキルについて解説しているので、スキルの基本を知りたい方はまずこちらをご覧ください。
- [2026年版] Claude Code を知る。 | DevelopersIO
- Agent Skills (Claude Code Skills) の公式ガイドに沿って、CVE 脆弱性情報収集用の Skill を作ってみた | DevelopersIO
最初に結論
npx skills add <owner/repo>でGitHub上のスキルをClaude Codeにインストールできます。skills-lock.jsonを共有すれば、別環境でも同じスキルを再現できます。- スキルは https://skills.sh で探せます。
vercel-labs/skillsとは?
vercel-labs/skills は、「オープンエージェントスキルエコシステム」のCLIツールです。スキルのインストール・削除・一覧表示・アップデートを、シンプルなコマンドで行えます。
Claude Codeのスキルは、 SKILL.md ファイルを所定のディレクトリに置くことで使えるようになります。
これを手動でやってもいいのですが、vercel-labs/skillsを使えば npx skills add <リポジトリ> の一発コマンドで完了します。
スキルの探し方
スキルを探すには、公式のスキルディレクトリ skills.sh が便利です。検索ボックスでキーワード検索できるほか、全期間の人気順(All Time)・24時間トレンド(Trending)・ホット(Hot)のタブで絞り込むことができます。
スキルのソースについて
vercel-labs/skills はGitHub上のリポジトリをスキルのソースとして使います。GitHub shorthand(owner/repo)のほか、フルURL、GitLab、gitURL、ローカルパスにも対応しています。
# GitHubショートハンド
$ npx skills add microsoft/playwright-cli
# フルURL
$ npx skills add https://github.com/microsoft/playwright-cli
# ローカルパス
$ npx skills add ./my-local-skills
skillをインストールしてみる
インストールコマンドの基本形
npx skills add <owner/repo>
今回は例として、MicrosoftのPlaywright公式CLIに含まれているスキル playwright-cli のスキルをインストールしてみます。このスキルをインストールすると、 Claude Codeが playwright-cli コマンドの使い方を理解し、ブラウザ操作(ページ遷移・クリック・スクリーンショット撮影など)を自律的に行えるようになります。
$ npx skills add https://github.com/microsoft/playwright-cli
実行するとリポジトリの中のskillを探して、どちらをインストールするのか聞かれます。今回は、 playwright-cli をインストールしたいのでこちらを選びます。
┌ skills
│
◇ Source: https://github.com/microsoft/playwright-cli.git
│
◇ Repository cloned
│
◇ Found 2 skills
│
◆ Select skills to install (space to toggle)
│ ◻ dev
│ ◼ playwright-cli (Automates browser interactions for web testing, form fill...)
└
次にどのエージェントにインストールするか選択できます。
私はClaude Codeを使っているので、Claude Codeを選択します。
Additional agents欄でClaude Codeをスペースで選択してEnterで確定します。
◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ── always included ────────────
│ • Amp
│ • Cline
│ • Codex
│ • Cursor
│ • Gemini CLI
│ • GitHub Copilot
│ • Kimi Code CLI
│ • OpenCode
│ • Warp
│
│ ── Additional agents ─────────────────────────────
│ Search:
│ ↑↓ move, space select, enter confirm
│
│ ❯ ○ Antigravity (.agent/skills)
│ ○ Augment (.augment/skills)
│ ● Claude Code (.claude/skills)
│ ○ OpenClaw (skills)
│ ○ CodeBuddy (.codebuddy/skills)
│ ○ Command Code (.commandcode/skills)
│ ○ Continue (.continue/skills)
│ ○ Cortex Code (.cortex/skills)
│ ↓ 23 more
│
│ Selected: Amp, Cline, Codex +7 more
└
次にスコープを聞かれます。今回はプロジェクト固有のスキルとしてインストールします。
Claude Codeのスキルは各スコープで以下のパスに配置されます。
| スコープ | パス |
|---|---|
| Project | .claude/skills/<skill-name>/SKILL.md |
| Global | ~/.claude/skills/<skill-name>/SKILL.md |
◆ Installation scope
│ ● Project (Install in current directory (committed with your project))
│ ○ Global
└
次にインストール方法を聞かれます。今回はSymlinkを選びます。
Symlinkはスキルの更新が一箇所で済むため推奨されてるようです。
◆ Installation method
│ ● Symlink (Recommended) (Single source of truth, easy updates)
│ ○ Copy to all agents
└
最後にインストールして良いかの確認が出ます。その後、インストールされます。
└ Done! Review skills before use; they run with full agent permissions.
スキル追加時のオプション
対話的な選択の代わりに、オプションを付ければ一気にインストールできます。
$ npx skills add https://github.com/microsoft/playwright-cli \
--skill playwright-cli \
--agent claude-code \
--yes
skills-lock.jsonからの復元
skills add でスキルをインストールすると、インストール情報が skills-lock.json に記録されます。
{
"version": 1,
"skills": {
"playwright-cli": {
"source": "microsoft/playwright-cli",
"sourceType": "github",
"computedHash": "7075ab30f588019197a2f1518bb4c9d33d69d33352af079b5f9c60303ad3886e"
}
}
}
このファイルをGitにコミットしておけば、チームメンバーや別の環境でも同じスキルセットを再現できます。nodeでいう、 package-lock.json にライブラリのインストール情報が蓄積されて、 npm ci でライブラリをインストールする、みたいな使い方ですね。
復元するには次のコマンドを使います。
$ npx skills experimental_install
コマンドの詳細は npx skills --help で確認できます。
"npx skills --help"
Usage: skills <command> [options]
Manage Skills:
add <package> Add a skill package (alias: a)
e.g. vercel-labs/agent-skills
https://github.com/vercel-labs/agent-skills
remove [skills] Remove installed skills
list, ls List installed skills
find [query] Search for skills interactively
Updates:
check Check for available skill updates
update Update all skills to latest versions
Project:
experimental_install Restore skills from skills-lock.json
init [name] Initialize a skill (creates <name>/SKILL.md or ./SKILL.md)
experimental_sync Sync skills from node_modules into agent directories
Add Options:
-g, --global Install skill globally (user-level) instead of project-level
-a, --agent <agents> Specify agents to install to (use '*' for all agents)
-s, --skill <skills> Specify skill names to install (use '*' for all skills)
-l, --list List available skills in the repository without installing
-y, --yes Skip confirmation prompts
--copy Copy files instead of symlinking to agent directories
--all Shorthand for --skill '*' --agent '*' -y
--full-depth Search all subdirectories even when a root SKILL.md exists
Remove Options:
-g, --global Remove from global scope
-a, --agent <agents> Remove from specific agents (use '*' for all agents)
-s, --skill <skills> Specify skills to remove (use '*' for all skills)
-y, --yes Skip confirmation prompts
--all Shorthand for --skill '*' --agent '*' -y
Experimental Sync Options:
-a, --agent <agents> Specify agents to install to (use '*' for all agents)
-y, --yes Skip confirmation prompts
List Options:
-g, --global List global skills (default: project)
-a, --agent <agents> Filter by specific agents
--json Output as JSON (machine-readable, no ANSI codes)
Options:
--help, -h Show this help message
--version, -v Show version number
Examples:
$ skills add vercel-labs/agent-skills
$ skills add vercel-labs/agent-skills -g
$ skills add vercel-labs/agent-skills --agent claude-code cursor
$ skills add vercel-labs/agent-skills --skill pr-review commit
$ skills remove # interactive remove
$ skills remove web-design # remove by name
$ skills rm --global frontend-design
$ skills list # list project skills
$ skills ls -g # list global skills
$ skills ls -a claude-code # filter by agent
$ skills ls --json # JSON output
$ skills find # interactive search
$ skills find typescript # search by keyword
$ skills check
$ skills update
$ skills experimental_install # restore from skills-lock.json
$ skills init my-skill
$ skills experimental_sync # sync from node_modules
$ skills experimental_sync -y # sync without prompts
Discover more skills at https://skills.sh/
ただし、この方法では .agents/skills フォルダにしかスキルをインストールしてくれません。
Claude Codeで使うためには、追加で以下のようなコマンドを実行して .claude/skills フォルダに反映する必要があります。
$ cp -r .agents/skills/* .claude/skills/
インストール済みスキルの確認
$ npx skills list
プロジェクトスコープとグローバルスコープ、それぞれのインストール済みスキルが一覧表示されます。
スキルのアップデート
$ npx skills update
インストール済みのスキルをまとめてアップデートできます。
スキルの削除
$ npx skills remove <skill-name>
使わなくなったスキルを削除できます。
インストールされたスキルを使う
インストールされたスキルは、Claude Codeで /スキル名 と入力することで呼び出せます。playwright-cli スキルであれば /playwright-cli で呼び出せます。
また、スキルの SKILL.md に書かれた description に基づいて、Claude が会話の文脈から自動的にスキルを適用してくれることもあります。
注意点:野良スキルのリスク
弊社ブログでも取り上げていますが、信頼できないソースからのスキルには注意が必要です。
スキルはClaude Codeがファイルを読んだりコマンドを実行したりする際の指示になります。信頼できないスキルをインストールすると、意図しないデータの漏洩や不正なコマンド実行につながる可能性があります。
skills.shで公開されているスキルも含め、 SKILL.md の内容を必ず確認する ことをおすすめします。
おわりに
vercel-labs/skillsを使うことで、Claude Codeへのスキル追加がワンコマンドで完了するようになりました。npx skills add でインストールし、 skills-lock.json を共有すれば、他の環境でも同じスキルをインストールできる手軽さが気に入っています。
skills.shのディレクトリには多彩なスキルが揃っているので、普段の開発フローに合うものを探してみると楽しいと思います。このブログがどなたかのお役に立てれば幸いです。







