ちょっと話題の記事

vercel-labs/skillsでGitHubにあるClaude Codeのスキルを簡単に追加してみた

npx skills add <owner/repo> でClaude Codeにスキルをワンコマンドで追加できるCLIツール「vercel-labs/skills」の使い方を紹介。スキル追加から復元まで解説。

2026.03.25

Claude Codeのスキル（SKILL.md）は、AIエージェントにカスタム機能を追加できる便利な仕組みです。自分でスキルを作るのも楽しいですが、すでに誰かが作ったスキルを手軽に活用できたらもっと嬉しいですよね。

そんなニーズに応えてくれるのが vercel-labs/skills です。スキルのインストール・管理を統一的に行えるCLIツールで、Claude Codeをはじめとする40以上のAIエージェントに対応しています。試してみたので紹介します。

弊社ブログでもClaude Codeのスキルについて解説しているので、スキルの基本を知りたい方はまずこちらをご覧ください。

最初に結論

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）のタブで絞り込むことができます。

https://skills.sh

スキルのソースについて

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

参考：README - vercel-labs/skills

skillをインストールしてみる

インストールコマンドの基本形

npx skills add <owner/repo>

今回は例として、MicrosoftのPlaywright公式CLIに含まれているスキル playwright-cli のスキルをインストールしてみます。このスキルをインストールすると、 Claude Codeが playwright-cli コマンドの使い方を理解し、ブラウザ操作（ページ遷移・クリック・スクリーンショット撮影など）を自律的に行えるようになります。

参考：GitHub - microsoft/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 に記録されます。

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 が会話の文脈から自動的にスキルを適用してくれることもあります。

参考：Extend Claude with skills - Claude Code Docs

注意点：野良スキルのリスク

弊社ブログでも取り上げていますが、信頼できないソースからのスキルには注意が必要です。

スキルはClaude Codeがファイルを読んだりコマンドを実行したりする際の指示になります。信頼できないスキルをインストールすると、意図しないデータの漏洩や不正なコマンド実行につながる可能性があります。

skills.shで公開されているスキルも含め、 SKILL.md の内容を必ず確認する ことをおすすめします。

おわりに

vercel-labs/skillsを使うことで、Claude Codeへのスキル追加がワンコマンドで完了するようになりました。npx skills add でインストールし、 skills-lock.json を共有すれば、他の環境でも同じスキルをインストールできる手軽さが気に入っています。

skills.shのディレクトリには多彩なスキルが揃っているので、普段の開発フローに合うものを探してみると楽しいと思います。このブログがどなたかのお役に立てれば幸いです。

vercel-labs/skillsでGitHubにあるClaude Codeのスキルを簡単に追加してみた

最初に結論

vercel-labs/skillsとは？

スキルの探し方

スキルのソースについて

skillをインストールしてみる

インストールコマンドの基本形

スキル追加時のオプション

skills-lock.jsonからの復元

インストール済みスキルの確認

スキルのアップデート

スキルの削除

インストールされたスキルを使う

注意点：野良スキルのリスク

おわりに

参考資料

Claudeならクラスメソッドにお任せください

関連記事

AWSで探す

注目のテーマ

プロダクトやサービスで探す

特集やシリーズから探す

EVENTS