Claude CodeにNetlify Skillsプラグインを入れる手順と使い分け
Netlify Skillsプラグインは15のNetlifyスキルとMCPサーバーをまとめて入れるプラグインです。インストールコマンド、npxで入れる方法との違い、15スキルの役割を表で見比べます。
Netlify Skillsプラグインは、Netlifyの機能ごとに分かれた15個のスキルと、Netlify公式のMCPサーバーをまとめてClaude Codeに入れるプラグインです。Netlifyが公開しているリポジトリ netlify/context-and-tools がマーケットプレイスを兼ねており、2本のコマンドで入ります。
スキルは「Netlifyの機能がどう動くか」の事実を書いた参照資料です。Functionsの書き方、netlify.tomlの項目、キャッシュ制御の挙動などを、Claudeが毎回ドキュメントを検索せずに引けるようになります。
インストール — プラグイン経由とnpx経由の2通り
Claude Codeへの入れ方は2つあります。どちらも同じスキル群を入れますが、スキルの置き場所と更新の持ち主が違います。
/plugin marketplace add netlify/context-and-tools
/plugin install netlify-skills@netlify-context-and-tools1行目でマーケットプレイスを登録し、2行目でプラグインを入れます。/plugin install はセッション内で実行すると、すぐには入れずに /plugin パネルのプラグイン詳細を開き、インストール範囲を選ばせます。入れたあとは /reload-plugins で反映します。
シェルから入れるなら次の形です。スクリプトやセットアップ手順に書くときはこちらが向きます。
claude plugin marketplace add netlify/context-and-tools
claude plugin install netlify-skills@netlify-context-and-tools --scope projectもう1つはリポジトリ側が案内している @netlify/skills パッケージ経由です。
npx @netlify/skills@latest add --all --agent claude-codeこちらはスキルを .claude/skills/ に書き込みます。プロジェクトに既に .claude/、.agents/、.grok/ のどれか1つだけがあれば、--agent を省いてもそのディレクトリへ書きます。0個または複数あるときは推測せず --agent を求められます。
どちらで入れるか
| 観点 | プラグイン | npxで add |
|---|---|---|
| 置き場所 | プラグインプラグインとして管理される | npxで addプロジェクトの .claude/skills/ |
| MCPサーバー | プラグイン同梱される | npxで add入らない |
| 更新 | プラグインClaude Code側のプラグイン更新 | npxで addcheck で状態確認、update で更新 |
| 単体のスキルだけ入れる | プラグイン不向き(まとめて入る) | npxで addadd netlify-functions のように指定できる |
| バージョン固定 | プラグインマーケットプレイスの #ref 指定 | npxで add--version やパッケージのバージョン指定 |
Claudeが読む資料を、リポジトリにコミットしてチームで同じバージョンに揃えたいならnpx側です。Claude Codeにインストールと更新を任せ、NetlifyのMCPサーバーも一緒に欲しいならプラグイン側です。
プラグインのインストール範囲はどれを選ぶか
プラグインは、どの設定ファイルに「有効」と記録するかで3つの範囲(スコープ)を選べます。シェルから入れるときの既定はユーザースコープで、--scope project か --scope local を付けると変わります。
| スコープ | 有効になる範囲 | 記録先 |
|---|---|---|
| user | 有効になる範囲自分の、このマシン上の全プロジェクト | 記録先~/.claude/settings.json |
| project | 有効になる範囲このリポジトリで作業する全員 | 記録先.claude/settings.json(コミットする) |
| local | 有効になる範囲自分の、このリポジトリだけ | 記録先.claude/settings.local.json |
Netlifyを使うリポジトリが決まっていて、チーム全員にスキルを効かせたいならproject、まず自分だけで試すならlocal、Netlify案件を複数抱えているならuserという選び方になります。同じプラグインを複数のスコープに設定した場合は、local、project、userの順に優先されます。
15個のスキルは何を扱うか
READMEの一覧に載っているスキルは15個です。機能のまとまりごとに整理すると選びやすくなります。
| まとまり | スキル | 扱う内容 |
|---|---|---|
| 実行基盤 | スキルnetlify-functions | 扱う内容サーバーレス関数。現行の書き方、ルーティング、バックグラウンド・スケジュール・ストリーミング |
スキルnetlify-edge-functions | 扱う内容Denoランタイム、ミドルウェア、位置情報 | |
| データ | スキルnetlify-blobs | 扱う内容キーバリューとバイナリのオブジェクトストレージ |
スキルnetlify-database | 扱う内容Neon上のマネージドPostgres。Drizzle ORMとマイグレーション | |
| 配信 | スキルnetlify-image-cdn | 扱う内容画像の変換と最適化 |
スキルnetlify-caching | 扱う内容CDNキャッシュ制御、キャッシュタグ、パージ、stale-while-revalidate | |
| 設定・デプロイ | スキルnetlify-config | 扱う内容netlify.tomlのリダイレクト、ヘッダー、ビルド設定、デプロイコンテキスト、環境変数 |
スキルnetlify-deploy | 扱う内容CLIの導入と認証、サイトのリンク、Gitベース・手動・CIのデプロイ、トラブル対応 | |
スキルnetlify-frameworks | 扱う内容Vite、Astro、TanStack、Next.js向けのアダプター | |
| アプリ機能 | スキルnetlify-forms | 扱う内容HTMLフォーム処理、AJAX送信、スパムフィルタ |
スキルnetlify-identity | 扱う内容サインアップ、ログイン、OAuth、ロールベースのアクセス制御 | |
スキルnetlify-access-control | 扱う内容パスワード保護、チーム限定、公開範囲の既定値、SSO | |
| AI関連 | スキルnetlify-ai-gateway | 扱う内容OpenAI、Anthropic、Google SDK向けのAI Gatewayプロキシ |
スキルnetlify-agent-runner | 扱う内容Claude、Codex、Geminiのタスクをサイトのリポジトリに対してリモート実行 | |
スキルnetlify-mcp-servers | 扱う内容Netlify Functions上で動かすMCPサーバー(トランスポート、認証、クライアント接続) |
一部のスキルには references/ が付いており、深い内容を持ちます。画像アップロードのパイプライン(Functions・Blobs・Image CDNの組み合わせ)、Vite・Astro・TanStack Start・Next.js各向けの手順、Identityの応用パターン、CLIコマンド集、デプロイパターン、netlify.tomlガイドがあります。
名前から役割を推測しにくいのは netlify-agent-runner と netlify-mcp-servers です。前者は「Netlify上でエージェントのタスクを走らせる」機能のスキルで、いまClaude Codeが動いている環境の話ではありません。後者は「NetlifyにMCPサーバーを置く」側の資料で、Claude CodeからNetlifyを操作するMCPサーバーの接続とは別物です。
プラグインに含まれるもう1つ — ルーターとMCPサーバー
プラグインは、スキル本体に加えて skills/CLAUDE.md をルーターとして含みます。作ろうとしているものに応じて、どのスキルを読むかをエージェントに示す役割です。
さらにClaude Code向けのプラグインは、Netlify公式のMCPサーバーも登録します。接続先は https://netlify-mcp.netlify.app/mcp で、初回利用時にOAuthで認可します。トークンの用意もローカルへのインストールも不要です。プロジェクトの作成・デプロイ・環境変数の管理をツールとして呼べるのは、このMCPの側です。
スキルとMCPで役割が分かれる
| やりたいこと | 効くもの |
|---|---|
| 関数を最新の書き方で実装する | 効くものスキル(netlify-functions) |
netlify.tomlのリダイレクトを正しい構文で書く | 効くものスキル(netlify-config) |
| プレビューデプロイを作る、本番に出す | 効くものMCPサーバー |
| 環境変数を設定する | 効くものMCPサーバー |
| デプロイが落ちた原因を調べる | 効くものMCPの状態・ログ取得 + スキル(netlify-deploy) |
スキルが「どう書くか」、MCPが「実際に動かす」と分担します。MCPの接続手順、リモート版とローカル版の違い、認証のつまずきの切り分けはNetlifyのMCPサーバー解説に書いてあります。ここでは重複を避けます。
入れたあとの確認と使い方
スキルが効いているかは、Claudeに頼んで確かめるのが早い方法です。次のように、スキルの description に当たる内容をそのまま依頼文にします。
Netlifyのスケジュール関数を毎日9時に動かしたい。
netlify.tomlとfunctionsの書き方を、Netlifyスキルに従って示してClaude Codeのスキルは、frontmatterの description を見てClaudeが自動で読み込むかを決めます。そのため、Netlify機能に触れる依頼なら、スキル名を指定しなくても該当スキルが読まれる設計です。スキル名を指定して呼ぶ場合、プラグイン由来のスキルは /プラグイン名:スキル名 の形になります。プラグインを入れた後に / と入力すると、候補に正確な名前が出ます。
CLAUDE.mdで補う
スキルは「Netlifyの事実」だけを持ち、「自分のプロジェクトでどう組むか」は持ちません。READMEの設計原則も、スキルは「この機能はどう動くか」に答えるもので、「プロジェクトをどう構成すべきか」には答えないと述べています。構成の方針は自分のCLAUDE.mdに書く分担です。
## デプロイ
- ホスティングはNetlify。関数は `netlify/functions/` に置き、v2の書き方で書く
- 本番デプロイの前に、必ずプレビューデプロイを作ってURLを報告する
- `netlify.toml` を変えたら、変更理由を1行ずつコミットメッセージに書くスキルがAPIの正しい形を、CLAUDE.mdが自分たちの運用ルールを受け持つ形です。プラグインの仕組み自体はClaude Codeプラグインの解説、SKILL.mdの項目はSkillsのfrontmatter解説が詳しいです。
更新と、スキルが古くなったとき
スキルは機能ごとに独立したバージョンを持ちます。READMEによると、各スキルのバージョンは「そのスキルのファイルが最後に変わったリリース」です。セット全体が1.6.0でも、変更のないスキルは1.4.2のままという状態があり得ます。
npx経由で入れた場合は、状態を check で確かめられます。
npx @netlify/skills@latest check
npx @netlify/skills@latest updatecheck は入っているスキルをcurrent(最新)・stale(古い)・modified(手元で編集済み)・renamed・deprecated・duplicate・unknown(自分のスキル)に分類し、足りないスキルも一覧にします。更新が必要なものがあると終了コード1で終わるため、CIに置いてスキルの鮮度を検査する使い方もできます。update は古いものを置き換え、名前が変わったものを移行し、廃止されたものを削除します。手元で編集したスキルは、--reset を付けない限り触りません。
プラグイン経由で入れた場合の更新は、Claude Codeのプラグイン更新(マーケットプレイスの自動更新か、手動のアップデート)に従います。スキルを手元で書き換えて育てたい人は、プラグインではなくnpx側で入れて .claude/skills/ を編集する形が合います。
他のエージェントと同じスキルを共有する
同じリポジトリを、Claude Code以外のエージェントでも触るチームでは、スキルの置き場所の違いに注意します。READMEの対応表では、Claude Codeは .claude/skills/、Cursor・Codex・Gemini CLI・GitHub Copilot(VS Code)は .agents/skills/ です。npx @netlify/skills@latest add --all --agent cursor のように、エージェントを替えて複数回実行すれば、同じ中身を各ディレクトリへ入れられます。任意のディレクトリに入れたいときは --dest <dir> です。
Cursor・Codex・Copilot CLIはルールファイルや AGENTS.md ルーターを使う旧形式でも入れられますが、これらはMCPサーバーを同梱しません。MCPが要る場合は、各クライアントへ手動で追加する必要があります。
つまずきやすい点
- MCPを使うつもりでnpx経由だけで入れた: npxの
addはスキルしか入れません。デプロイ操作まで任せたいなら、プラグイン経由で入れるか、MCPサーバーを別途追加します。 - 共同作業者のマシンでスキルが効かない: プロジェクトスコープのエントリをコミットしても、各自のインストールは別に必要です(前掲の注意)。
- スキルを呼んだのに古い書き方が出る:
checkでstaleになっていないか確かめます。プラグイン経由なら、マーケットプレイスの更新を実行します。 - 手元で編集したら更新されなくなった:
modifiedと判定されたスキルはupdateの対象外です。上書きしたいときだけ--resetを使います。
まとめ
Netlifyを使うリポジトリでClaude Codeを動かす機会が多いなら、プラグインで入れるのが近道です。スキル15個とMCPサーバーが一度に入り、Functions、netlify.toml、キャッシュの書き方をClaudeが引けるようになります。スキルをチームのリポジトリで固定し、check で鮮度を管理したいなら、npxで .claude/skills/ に入れる形が向きます。どちらでも、運用ルールの部分はCLAUDE.mdに自分で書く分担は変わりません。