Claude Code に絶対入れておきたいスキル5選

役割: Claude Code スキル5つのインストールと接続確認を担当する
文脈: このパソコンには5つがまだ入っていない可能性があり、今の Claude はブラウザも開けず、デザインの基準も持っていない状態です
入力: <OSとシェル、例: macOS zsh>, <技術スタック、例: Next.js のWebプロジェクト>, <目的を一行で、例: Claude に画面を自分で確認させ、作業の順番を見失わないようにしたい>
作業: 下の4ステップを順番に進めてください。
1. インストール確認: `node --version` で 22.20 以上かを確認し、`ls .claude/skills` と `ls ~/.claude/skills` を実行して agent-browser, find-skills, design-taste-frontend, mcp-builder がすでにあるか確認してください。`ls ~/.claude/commands/gsd-help.md` で GSD の有無も確認してください。すでにある場合は入れ直さず、状態だけ報告してください。
2. 未インストールなら導入: 足りないものだけを選んで実行してください。`npx --yes skills@latest add vercel-labs/agent-browser --agent claude-code --yes --copy`, `npx --yes skills@latest add vercel-labs/skills --skill find-skills --agent claude-code --yes --copy`, `npx --yes skills@latest add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend --agent claude-code --yes --copy`, `npx --yes skills@latest add anthropics/skills --skill mcp-builder --agent claude-code --yes --copy`。GSD は方式が違うので `npx --yes @opengsd/gsd-core@latest --claude --global` で別に入れてください。
3. 接続確認: `ls .claude/skills` を実行して4つの名前がすべて見えるか確認し、`npx --yes @opengsd/gsd-core@latest --help` がバージョン番号を出すか確認してください。agent-browser のコマンドライン版も使うなら `npm install -g agent-browser && agent-browser install` を実行したあと `agent-browser --version` で確認してください。
4. 最後に、5つがそれぞれ何をしてくれて、これからどう使えばいいのかを、開発が初めての人にも分かる言葉で5行以内にまとめてください。
制約: 既存のファイルや設定を上書き・削除しないでください。すでに入っているものを重ねてインストールしないでください。.env のような秘密鍵を含むファイルは読まず、出力もしないでください。スキルの元ファイルを勝手に書き換えないでください。
出力: 実際に実行したコマンドの一覧、確認できた Node のバージョン、新しくできたフォルダとファイル、残っているエラーを整理してください。
検証: `ls .claude/skills` に agent-browser, find-skills, design-taste-frontend, mcp-builder の4つが見え、`npx --yes @opengsd/gsd-core@latest --help` がバージョン番号を出力すること。1つでも失敗したら完了とは報告せず、失敗したコマンドと原因、次の対処を伝えてください。

Quick Start

• 公式サイト: agent-browser.dev ・ skills.sh ・ opengsd.net
• 公式 GitHub: vercel-labs/agent-browser ・ vercel-labs/skills ・ open-gsd/gsd-core ・ Leonxlnx/taste-skill ・ anthropics/skills

作業したいプロジェクトのフォルダに移動してから、下の4行をまるごとターミナルに貼り付けてください。4つのスキルをこのプロジェクトに入れるコマンドです。

npx --yes skills@latest add vercel-labs/agent-browser --agent claude-code --yes --copy
npx --yes skills@latest add vercel-labs/skills --skill find-skills --agent claude-code --yes --copy
npx --yes skills@latest add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend --agent claude-code --yes --copy
npx --yes skills@latest add anthropics/skills --skill mcp-builder --agent claude-code --yes --copy

うまくいくと ✓ agent-browser (copied) のように、項目ごとにコピー完了の行が1つずつ出ます。

5つ目の GSD は入れ方が違います。下の1行を別に実行してください。

npx --yes @opengsd/gsd-core@latest --claude --global

うまくいくとインストール項目がずらりと出て、最後に Done! と次にやることが案内されます。

入ったかどうかを確認するコマンドです。

ls .claude/skills

agent-browser, design-taste-frontend, find-skills, mcp-builder の4つの名前が出れば成功です。

STEP 1. 準備物の確認：2分

ここでは、インストールが途中で止まらないように Node.js のバージョンを先に確認します。5つとも Node.js で入れるので、バージョンが低いとコマンドが失敗します。

用語: Node.js はパソコンで JavaScript を動かしてくれるプログラムです。ここではインストールのコマンドを走らせるためだけに使います。

入っている Node.js のバージョンを確認するコマンドです。

node --version

v22.20.0 のように v で始まる数字が出れば大丈夫です。頭の数字が 22 より小さい、またはコマンドが見つからないと出た場合は、nodejs.org から LTS 版を先に入れてください。

用語: ターミナルはコマンドを文字で入力する黒い画面です。macOS はターミナル.app、Windows は PowerShell を使えば大丈夫です。

Claude Code が入っているかも確認します。

claude --version

数字が出れば準備完了です。コマンドが見つからないと出たら、claude.com/claude-code から先にインストールしてください。

STEP 2. スキルとは何かを30秒だけ：2分

ここでは、これから入れるものが正確に何なのかを押さえます。これが分かると、残りのステップが全部同じ形に見えてきます。

用語: スキルは、AI にあらかじめ読ませておく作業指示書のファイルです。フォルダ1つの中に SKILL.md が1つ入っている構造です。

スキルは、会話のたびに貼り付けるプロンプトではありません。一度入れておけば、Claude が必要なときに自分で取り出して読みます。追加の月額もかかりません。

入れる場所は2つから選びます。何もオプションを付けなければ今いるフォルダの .claude/skills に入り、-g を付けるとアカウント全体で使う ~/.claude/skills に入ります。

初めてならプロジェクトへのインストールから始めてください。気に入ったら、あとで -g を付けてアカウント全体に入れ直せば大丈夫です。

STEP 3. ブラウザを使うスキル：3分

ここでは、Claude が作った画面を自分で開いて確認できるようにします。これがないと、Claude はコードを書くだけで、結果を見ないまま「できました」と報告してきます。

agent-browser は Vercel が作ったブラウザ自動化ツールです。Chrome を開く、クリックする、入力する、画面をキャプチャする、を Claude が自分でやります。

スキルを入れるコマンドです。

npx --yes skills@latest add vercel-labs/agent-browser --agent claude-code --yes --copy

うまくいくと ✓ agent-browser (copied) と一緒に → ./.claude/skills/agent-browser というパスが表示されます。

ここで入るスキルは説明書の役割だけです。実際にブラウザを動かすには、コマンドライン版も一緒に入れる必要があります。

npm install -g agent-browser
agent-browser install

1行目でツールを入れ、2行目で自動化専用の Chrome をダウンロードします。うまくいくとインストールの進捗表示が流れて、プロンプトが戻ってきます。

用語: 自動化専用 Chrome は、テスト用に配布されている別の Chrome です。普段使いの Chrome とは別に入るので、ログイン状態やブックマークには影響しません。

インストール確認のコマンドです。

agent-browser --version

バージョンの数字が出れば準備完了です。ここから Claude にこう頼めるようになります。

ローカル開発サーバーを立ち上げてから、agent-browser で最初の画面を開いてください。
会員登録フォームを実際に入力して送信まで試して、
詰まるところがあれば画面をキャプチャして何が問題か教えてください。

Linux では必要なシステムファイルが足りないことがあります。そのときは下の1行を実行してください。

agent-browser install --with-deps

STEP 4. 残り3つのスキルを入れる：4分

ここでは、スキル探索・デザイン・ツール接続を担当する3つをまとめて入れます。3つとも同じ skills コマンドを使うので、形はまったく同じです。

1つ目は find-skills です。作りたいものを言うと、公開されているスキルの一覧を探して合うものを勧め、インストールまでやってくれます。

npx --yes skills@latest add vercel-labs/skills --skill find-skills --agent claude-code --yes --copy

うまくいくと ✓ find-skills (copied) の行が出ます。

2つ目は Taste です。リポジトリの中に似たスキルが複数入っているので、--skill で1つだけ選ぶ必要があります。

npx --yes skills@latest add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend --agent claude-code --yes --copy

うまくいくと ✓ design-taste-frontend (copied) の行が出ます。オプションなしでリポジトリをまるごと入れると、似たスキルが4つ一度に入ってくるので注意してください。

3つ目は mcp-builder です。Anthropic の公式リポジトリに入っていて、使いたいサービスを Claude につなぐサーバーを代わりに作ってくれます。

npx --yes skills@latest add anthropics/skills --skill mcp-builder --agent claude-code --yes --copy

うまくいくと ✓ mcp-builder (copied) の行が出ます。

用語: MCP は、Claude が外部サービスとやり取りするときの共通規格です。この規格に合わせた接続プログラムをサーバーと呼びます。

STEP 5. GSD のインストール：3分

このステップだけ他の4つとやり方が違います。GSD はスキルを入れるだけでなく、コマンドと作業記録のフォルダまで一緒に入れる必要があるので、専用のインストーラーを使います。

GSD は、長い作業の中で Claude が道に迷わないよう支えてくれる道具です。大きな作業を段階に分け、決めた内容をファイルに残し、各段階を新しい会話で実行します。

アカウント全体に入れるコマンドです。

npx --yes @opengsd/gsd-core@latest --claude --global

うまくいくとインストール項目がずらりと出て、最後に Done! が出ます。今のプロジェクトだけに入れたい場合は --global の代わりに --local を使ってください。

入る項目が多いと感じたら、軽い構成だけを選ぶこともできます。

npx --yes @opengsd/gsd-core@latest --claude --global --profile=core

インストールが終わったら、Claude Code を完全に終了してから起動し直してください。そのあと入力欄に下を打ち込みます。

/gsd-new-project

コマンドが認識されて、何を作るのかを聞く質問が出れば成功です。すでにあるプロジェクトに付けるなら /gsd-onboard を使ってください。

参考: 以前使われていたリポジトリのアドレスは2026年6月にアーカイブされ、もう更新されていません。今は上のコマンドの @opengsd/gsd-core が引き継いで管理されています。

STEP 6. インストール結果の確認：2分

ここでは目視ではなくコマンドで確認します。スキルは静かに入るので、一覧を自分で見ないと確実になりません。

プロジェクトに入れたスキルを確認するコマンドです。

ls .claude/skills

正常なら、下の4つの名前がすべて見えます。

agent-browser
design-taste-frontend
find-skills
mcp-builder

アカウント全体に入れた場合は、こちらを代わりに確認してください。

ls ~/.claude/skills

GSD が入っているかを確認するコマンドです。

npx --yes @opengsd/gsd-core@latest --help

バージョン番号と使い方が出れば入っています。

名前が1つでも抜けていたら、その行だけをもう一度実行してください。すでに入っているものはそのまま残ります。

STEP 7. 5つを実際に使ってみる：5分

ここでは、入れたものが実際に動くかを小さい依頼で確かめます。最初から大きい作業をさせると、どこで詰まったのか分かりにくくなります。

Claude Code を起動して下を入力してください。インストール状態だけを確認する依頼です。

今このプロジェクトに入っているスキルの一覧を確認して、
それぞれ何をする道具なのかを一行ずつまとめてください。
ファイルは修正しないでください。

スキルの名前と説明が並んで出てくれば、Claude がスキルを読んでいる証拠です。

次はブラウザです。作った画面を実際に確認させます。

agent-browser で <確認したいアドレス> を開いて最初の画面をキャプチャしてください。
ボタンが押せるか、リンクが実際に移動するかも確認して、
問題があればどこが問題か教えてください。

次はスキル探索です。何が必要かを言うだけで大丈夫です。

<やりたい作業> をしようとしています。
使えそうなスキルがすでにあるか探して、
インストール数と作った場所まで一緒に教えてください。

デザインは、作るときに基準を一緒に渡すと結果が変わります。

<作りたい画面の説明> を作ってください。
デザインスキルの基準に従い、下は使わないでください。
- 紫や青系のグラデーション背景
- カードの中にカードを入れる構造
- 跳ねるバウンス効果

ツール接続は、使いたいサービスのドキュメントを渡すだけです。

<つなぎたいサービス> を Claude から使いたいです。
公式APIドキュメントは <ドキュメントのアドレス> です。
MCP サーバーを作って、作り終えたら実際につながるか確認してください。

よく詰まるところ

この5つを選んだ理由

それぞれ別の穴を埋めます。重なるところがないので、5つ全部入れてもお互いの邪魔をしません。

ブラウザのスキルは「確認」を担当します。Claude が作った画面を人の代わりに押してみるので、「できました」という報告が実際とずれることが減ります。

探索のスキルは「探す時間」を減らします。どんなスキルがあるのか知らずに全部自分で作ってしまう状況を防いでくれます。

作業管理のスキルは「長い会話」を支えます。決めた内容をファイルに残すので、会話が途切れても続きから進められます。

デザインのスキルは「初期値」を押しのけます。基準がないと AI はいつも見た画面に戻ってしまいますが、その基準を代わりに立ててくれます。

接続のスキルは「外に出る通路」を作ります。使いたいサービスを Claude につなぐ作業が、ドキュメント1つで終わります。

公式資料

• Agent Browser 公式サイト: agent-browser.dev
• Agent Browser リポジトリ: github.com/vercel-labs/agent-browser
• Agent Browser スキル文書: agent-browser.dev/skills
• Skills CLI リポジトリ: github.com/vercel-labs/skills
• スキル検索サイト: skills.sh
• GSD Core 公式サイト: opengsd.net
• GSD Core リポジトリ: github.com/open-gsd/gsd-core
• Taste Skill 公式サイト: tasteskill.dev
• Taste Skill リポジトリ: github.com/Leonxlnx/taste-skill
• Anthropic 公式スキルリポジトリ: github.com/anthropics/skills
• Claude Code スキル文書: code.claude.com/docs/en/skills
• Node.js ダウンロード: nodejs.org

この資料が役に立ったら

Won. Studio では、こうした AI 活用の資料を AIアカデミーで公開しています。

• AIアカデミーの一覧を見る：新しいガイドはここに追加されます
• お問い合わせ：詰まったところを教えていただければ、次の資料づくりの参考にします

原典（韓国語）: 게으른 빌더 · lazyowen.com