Agent Skills のインストール

学習後、できること

• 一つのコマンドで迅速に Agent Skills をインストールする（推奨）
• 手動でスキルを Claude Code のローカルディレクトリにコピーする
• claude.ai でスキルを有効にし、ネットワーク権限を設定する
• インストール時の一般的なエラーをトラブルシューティングする

現在の課題

Claude を使ってプロジェクトをデプロイしたり、コードをレビューしたりしたいが、Claude Code または claude.ai にどうインストールするかわからない。あるいは、インストールを試みたがスキルが有効にならず、デプロイ時に「Network Egress Error」が表示される。

使用タイミング

• ✓ 初めて Agent Skills を使用する場合
• ✓ Claude Code（ターミナルコマンドラインツール）を使用している場合
• ✓ claude.ai（ウェブ版 Claude）を使用している場合
• ✓ デプロイ機能など、スキルがネットワークにアクセスする必要がある場合

🎒 開始前の準備

開始する前に、以下が済んでいることを確認してください：

• [ ] Node.js 20 以上のバージョンをインストール済み
• [ ] 使用中の Claude Code または claude.ai アカウントがある

ヒント

Agent Skills が何かわからない場合は、先に Agent Skills 入門 を読むことをお勧めします。

コアコンセプト

Agent Skills のインストールには 2 つの方法があります：

1. npx インストール（推奨）：ワンクリックで Claude Code にインストール、すべてのステップが自動化されます
2. 手動インストール：ファイルを指定したディレクトリにコピー。claude.ai 向けやインストール場所をカスタマイズする場合に適用

インストール後、スキルは Claude で自動的に有効になります——トリガーキーワード（"Deploy my app" など）を入力すると、Claude は対応するスキルを自動的に呼び出します。

方法 1：npx 迅速インストール（推奨）

これが最も簡単なインストール方法で、Claude Code ユーザーに適しています。

ステップ 1：インストールコマンドを実行

ターミナルで以下を実行します：

npx add-skill vercel-labs/agent-skills

理由add-skill は npm パッケージで、Agent Skills を自動的にダウンロードして正しいディレクトリにインストールします。

表示されるもの：

Skills successfully installed.

ステップ 2：インストールを検証

Claude Code で以下を入力します：

List available skills

表示されるもの： Claude が返すスキルリストに以下が含まれているはずです：

• react-best-practices
• web-design-guidelines
• vercel-deploy

チェックポイント ✅：これら 3 つのスキルが表示されれば、インストール成功です。

方法 2：Claude Code への手動インストール

npx を使用したくない場合、またはインストール場所を制御したい場合は、手動インストールを使用できます。

ステップ 1：プロジェクトをクローンまたはダウンロード

git clone https://github.com/vercel-labs/agent-skills.git
cd agent-skills

理由 手動インストールにはプロジェクトのソースコードを取得する必要があります。

ステップ 2：スキルを Claude Code ディレクトリにコピー

cp -r skills/react-best-practices ~/.claude/skills/
cp -r skills/web-design-guidelines ~/.claude/skills/
cp -r skills/claude.ai/vercel-deploy-claimable ~/.claude/skills/vercel-deploy

理由 Claude Code のスキルは ~/.claude/skills/ ディレクトリに保存されます。コピー後、Claude はこれらのスキルを認識できるようになります。

表示されるもの： コマンド実行完了後、エラー出力はありません。

チェックポイント ✅： ls ~/.claude/skills/ で確認すると、3 つのスキルディレクトリが表示されるはずです：react-best-practices、web-design-guidelines、vercel-deploy。

ステップ 3：Claude Code を再起動

Claude Code を強制終了して、再起動します。

理由 Claude Code は起動時にのみスキルリストを読み込むため、再起動が必要です。

方法 3：claude.ai でスキルを使用する

claude.ai（ウェブ版 Claude）を使用している場合、インストール方法が異なります。

方法 3.1：プロジェクトナレッジベースに追加

ステップ 1：スキルファイルを選択

skills/react-best-practices、skills/web-design-guidelines、skills/claude.ai/vercel-deploy-claimable の 3 つのディレクトリにあるすべてのファイルをパッケージ化します。

理由 claude.ai はスキルファイルを「ナレッジ」としてプロジェクトに追加する必要があります。

ステップ 2：プロジェクトにアップロード

claude.ai で：

1. 新規または既存のプロジェクトを開く
2. 「Knowledge」→「Add Files」をクリック
3. スキルファイルをアップロード（またはディレクトリ全体）

表示されるもの： ナレッジベースにプロジェクトのファイルリストが表示されます。

方法 3.2：SKILL.md のコンテンツを貼り付ける

ディレクトリ全体をアップロードしたくない場合は、SKILL.md の内容を直接コピーできます。

ステップ 1：スキル定義をコピー

skills/react-best-practices/SKILL.md を開き、内容全体をコピーします。

理由SKILL.md にはスキルの完全な定義が含まれており、Claude はこのファイルに基づいてスキルの機能を理解します。

ステップ 2：会話に貼り付ける

claude.ai の会話で SKILL.md の内容を貼り付けるか、プロジェクトの「Instructions」に追加します。

表示されるもの： Claude がスキル定義を受信したことを確認します。

ネットワーク権限の設定（重要）

vercel-deploy スキルを使用してプロジェクトをデプロイする場合、ネットワーク権限を設定する必要があります。

重要

vercel-deploy スキルは *.vercel.com ドメインにアクセスしてデプロイをアップロードする必要があります。この手順をスキップするとデプロイが失敗します！

ステップ 1：Claude 機能設定を開く

ブラウザで以下にアクセスします：

https://claude.ai/settings/capabilities

理由 ここでは Claude がアクセスできるドメインリストを管理できます。

ステップ 2：Vercel ドメインを追加

「Add domain」をクリックし、以下を入力します：

*.vercel.com

「Save」をクリックして保存します。

表示されるもの： ドメインリストに *.vercel.com が表示されます。

チェックポイント ✅：ドメインが追加され、スキルはネットワークにアクセスできるようになりました。

注意点

問題 1：スキルが有効にならない

現象：「Deploy my app」と入力したが、Claude がどうすればいいかわからない。

可能な原因：

• Claude Code が再起動されていない（手動インストールの場合）
• claude.ai のプロジェクトナレッジベースにスキルが正しく読み込まれていない

解決方法：

• Claude Code：アプリを再起動
• claude.ai：プロジェクトの Knowledge にスキルファイルがアップロードされているか確認

問題 2：デプロイ失敗（Network Egress Error）

現象：

Deployment failed due to network restrictions

解決方法： *.vercel.com がネットワーク権限に追加されているか確認します：

https://claude.ai/settings/capabilities にアクセス
*.vercel.com が含まれているか確認

問題 3：~/.claude/skills/ ディレクトリが見つからない

現象：手動インストール時にディレクトリが存在しないと表示される。

解決方法：

mkdir -p ~/.claude/skills/

問題 4：npx インストール失敗

現象：

npx: command not found

解決方法：

# Node.js と npm がインストールされているか確認
node -v
npm -v

# インストールされていない場合、https://nodejs.org/ から LTS バージョンをインストール

この授業のまとめ

この授業では、Agent Skills をインストールする 3 つの方法を紹介しました：

• npx 迅速インストール：Claude Code 推奨、ワンクリックで完了
• 手動インストール：ファイルを ~/.claude/skills/ にコピー。インストール場所を制御する場合に適用
• claude.ai インストール：ファイルをプロジェクトナレッジベースにアップロードまたは SKILL.md を貼り付ける

vercel-deploy スキルを使用する場合、https://claude.ai/settings/capabilities で *.vercel.com ネットワーク権限を追加することを忘れないでください。

インストール完了後、Claude は自動的にこれらのスキルを使用してコードレビュー、アクセシビリティチェック、プロジェクトデプロイを行います。

次の授業の予告

次の授業では React/Next.js パフォーマンス最適化ベストプラクティス を学びます。

学べること：

• 57 の React パフォーマンス最適化ルールの使用方法
• ウォーターフォールの排除、バンドルサイズの最適化、Re-render の削減
• AI がコードを自動的にレビューし、修復提案を行う方法

---

付録：ソースコード参照

クリックしてソースコードの場所を表示

更新日時：2026-01-25

機能	ファイルパス	行番号
npx インストール方法	README.md:83-86	83-86
Claude Code 手動インストール	AGENTS.md:98-105	98-105
claude.ai インストール方法	AGENTS.md:106-109	106-109
ネットワーク権限設定	skills/claude.ai/vercel-deploy-claimable/SKILL.md:104-112	104-112

重要なスキルパッケージ：

• react-best-practices：57 の React パフォーマンス最適化ルール（実際のルールファイル数）
• web-design-guidelines：100 以上の Web デザインガイドルール
• vercel-deploy：Vercel へのワンクリックデプロイ（40 以上のフレームワーク対応）