Claude Media
Claude Codeのcloudflareプラグインでwranglerなどのskillsを使う
Claude CodeClaude連携チュートリアル

Claude Codeのcloudflareプラグインでwranglerなどのskillsを使う

cloudflareプラグインはCloudflare公式のスキル19本とMCPサーバーを入れます。wrangler・durable-objects・web-perf・workers-profilingの中身と、任せる前の準備を扱います。

読了目安 約14分

cloudflareプラグインは、Cloudflareが配布するスキル19本と、Cloudflare APIにつながるMCPサーバー1本をまとめてClaude Codeに入れるプラグインです。Workers、Durable Objects、Wrangler CLI、Core Web Vitalsの監査といった作業で、Claudeが記憶ではなく公式の手順に沿って動くようになります。

この記事では導入の2コマンド、スキルが読み込まれる仕組み、主要4本(wrangler・durable-objects・web-perf・workers-profiling)の中身、任せる前に決めておく設定までを順に扱います。MCPサーバー側の接続はCloudflare MCPサーバーの接続手順にまとめています。

導入は2コマンド、同梱されるのはスキルとMCPサーバー1本

Claude Codeのセッション内で、マーケットプレイスを追加してからプラグインを入れます。

/plugin marketplace add cloudflare/skills
/plugin install cloudflare@cloudflare

リポジトリのREADMEは、対応するエージェントでは「ネイティブのプラグインでCloudflareのガイダンスとMCPサーバーの両方を入れる」ことを勧めています。スキルだけが欲しい場合は、Agent Skills標準に対応した別の入れ方もあります。

入れ方コマンドと置き場所MCPサーバー
プラグイン(推奨)コマンドと置き場所/plugin install cloudflare@cloudflareMCPサーバー同梱
npxで追加コマンドと置き場所npx skills add https://github.com/cloudflare/skillsMCPサーバーなし
クローンしてコピーコマンドと置き場所~/.claude/skills/ にスキルのフォルダをコピーMCPサーバーなし

同梱されるMCPサーバーは、メインの cloudflare 1本だけです。プラグインの .mcp.json には https://mcp.cloudflare.com/mcp がHTTP接続で書かれています。README自身が、製品別のMCPサーバーは意図して同梱していないと断っています。製品別サーバーが要るときは claude mcp add で足します。プラグインがMCPサーバーを登録する仕組みはプラグインに同梱されたMCPサーバーの仕組みに詳しくあります。

19本のスキルは会話に応じて自動で読み込まれる

READMEの説明では、スキルは文脈依存で、依頼がスキルのトリガーに合うと自動で読み込まれます。呼び出しの書式を覚える必要はなく、「このWorkerをデプロイして」と頼めばwrangler、「チャットルームの状態管理を作って」と頼めばdurable-objectsが候補になるという設計です。スキル側の description が合致の手がかりになる仕組みはClaude Code Skillsのfrontmatter全フィールドで扱っています。

READMEの一覧を用途で分けると次のとおりです。

区分スキル用途
入口スキルcloudflare用途目的に合うCloudflare製品と、使うべきスキル・ドキュメントを探す
開発・運用スキルwrangler、cf-cli、workers-best-practices、workers-profiling用途デプロイ、CLI選択、本番向けWorkersの書き方、CPU・メモリの分析
状態を持つ処理スキルdurable-objects、agents-sdk、k2用途調整・RPC・SQLite・アラーム・WebSocket、ステートフルなエージェント、ストリーム
実行環境スキルsandbox-next、sandbox-stable、sandbox-migrate-to-next用途Sandboxの新旧版と移行
フレームワーク・周辺スキルnextjs-on-cloudflare、basin、cloudflare-email-service、turnstile-spin用途Next.js、分析パイプライン、メール、Bot検証
性能監査スキルweb-perf用途Core Web Vitals、レンダリングを止める資源、ネットワークの連鎖
法人向けネットワークスキルcloudflare-one、cloudflare-one-migrations、gateway-workers用途Access・Gateway・WARPなどの設計と他社製品からの移行

開発者の日常で触れるのは中段の数本です。以降はその中から4本を、スキル本文に書かれた指示を基準に見ていきます。

wranglerスキルは「wranglerを使わない」場面を先に判定する

wranglerスキルの冒頭は、使う条件を絞っています。プロジェクトに wrangler.jsonc、wrangler.json、wrangler.toml があり、かつ cloudflare.config.ts が無いときに使います。新規プロジェクトや設定ファイルの無いプロジェクトでは、cf CLIを使い、Wranglerを足さないよう書かれています。

つまり、既存のWranglerプロジェクトを引き継ぐ依頼と、ゼロから始める依頼で、Claudeが選ぶコマンドが変わります。READMEの一覧でも cf-cli は「cfとWranglerのどちらを選ぶか」を扱うスキルとされています。

実作業での振る舞いも、読むと具体的です。

  • コマンドとフラグの記憶に頼らず、プロジェクトに入っているバージョンの wrangler --help と公式ドキュメントを先に引く
  • Wranglerのバージョンを、ドキュメントに合わせて黙って上げない
  • ローカルのシミュレーションとリモートのバインディングを区別し、書き込みを試す前にどちらを向いているか確認する
  • wrangler secret put と secret delete はデプロイ扱いとし、バージョンを作って即座に反映されるものとして扱う。段階的に反映したいときは wrangler versions secret の手順に回す
  • ロールバックの前に、Workerのコードだけが戻り、接続先のリソースとデータは戻らない点を確認する
  • 仕上げに wrangler types で型を再生成し、wrangler deploy --dry-run で確認する。ドライランが確かめるのはビルドとパッケージングまでで、リモートの動作の証明にはならない、と明記されている

Workers Previews(ブランチやプルリクエストごとの環境)にも節があります。使うにはプロジェクト内のWranglerが4.135.0以降である必要があり、グローバルにある新しい版は使われません。Previewのトークンやアクセス制御は、URLが既定で公開される点を利用者に伝えてから決める、という順序です。

認証情報の扱いは、スキルが先に線を引いている

スキルは、リモートコマンドの前に認証しているメンバーまたはAPIトークンを特定し、必要な最小の権限を調べるよう指示しています。wrangler login のOAuthは細かい権限指定に対応しないため、細かく絞りたいときはアカウント所有のAPIトークンを使い、その値をチャットに貼らせないとも書かれています。

ただしスキルは指示文であって、権限の強制ではありません。Claudeが何を実行できるかは、Claude Code側の許可設定が決めます。wrangler deploy や secret put を確認付きにするルールの組み方はWranglerの権限設計で扱っています。スキルの指示と許可設定は、両方入れて初めて二重の網になります。

durable-objectsスキルが持ち込む設計の型

durable-objectsスキルは、Durable Objectsの設計で外しやすい点を規則として持っています。冒頭には「APIや設定の知識は古い可能性があるので、記憶より取得を優先する」とあり、公式ドキュメント、API、ベストプラクティスのURLが並びます。

規則は7つです。

  1. チャットルームやゲーム、ユーザー単位で1つずつ、調整の単位に沿ってモデル化する(グローバルに1つのDOを作らない)
  2. 同じ入力が同じインスタンスに届くよう、getByName() で決定的にルーティングする
  3. ストレージはSQLiteを使い、マイグレーションに new_sqlite_classes を書く
  4. コンストラクターでの初期化には blockConcurrencyWhile() を使う。使うのはスキーマの準備だけ
  5. fetch() ハンドラーでなくRPCメソッドを使う(互換性日付が2024-04-03以降)
  6. 先にストレージへ書き、その後でメモリ上のキャッシュを更新する
  7. アラームはDOごとに1つ。setAlarm() は既存のアラームを置き換える

禁止事項も明示されています。全リクエストを1つのDOにさばかせる、リクエストのたびに blockConcurrencyWhile() を呼ぶ、重要な状態をメモリだけに置く、関連するストレージ書き込みの間に await を挟む、の4つがその例です。使いどころでも、状態を持たないリクエスト処理にはDOでなく通常のWorkerを使うよう書かれています。

スキルが示すバインディングとマイグレーションの設定は、次の形です。

// wrangler.jsonc
{
  "durable_objects": {
    "bindings": [{ "name": "MY_DO", "class_name": "MyDurableObject" }]
  },
  "migrations": [{ "tag": "v1", "new_sqlite_classes": ["MyDurableObject"] }]
}

この規則を生かすなら、依頼の書き方にも工夫が効きます。「DOを作って」だけだと、調整の単位が曖昧なまま実装が始まります。単位を先に決めた依頼にします。

予約システムの在庫確認をDurable Objectsで作って。
調整の単位は「店舗ID×日付」で、IDからgetByNameで引く。
ストレージはSQLite、スキーマ初期化はコンストラクターのみ。
アラームは使わない。実装後に既存のDO規則に照らしてレビューもして。

最後の一文が効きます。スキルの「Reviewing existing DO code for best practices」は使いどころの1つとして挙がっており、新規実装だけでなく既存コードのレビューにも使える設計だからです。

web-perfスキルは別のMCPサーバーを前提にする

web-perfは、Core Web Vitals、Lighthouseのスコア、レンダリングを止める資源、ネットワークの連鎖といった、ページの読み込みと操作の性能を監査するスキルです。cloudflareプラグインに入っていても、Cloudflare固有の話ではありません。

注意したいのは、計測にChrome DevToolsのMCPサーバーを使う前提で書かれている点です。スキルの最初の手順は「利用できるブラウザーと性能ツールを確かめる」で、トレース系のツールが無ければ、ソースとネットワークの分析だけ続け、取れなかった計測を明示するよう指示しています。cloudflareプラグインはChrome DevTools MCPを同梱しません。設定例はスキル内に npx -y chrome-devtools-mcp@latest として載っていますが、MCPの設定変更は利用者が許した範囲に限る、とも書かれています。導入はChrome DevTools MCPの導入手順を参照してください。

監査は5段階で進みます。

  1. 性能トレース(ページを開き、リロード付きで記録)
  2. Core Web Vitalsの分析(LCPの内訳、CLSの原因要素など)
  3. ネットワーク分析(レンダリングを止める資源、遅れて発見される資源、キャッシュヘッダーの不足)
  4. アクセシビリティのスナップショット
  5. コードベースの分析(他社サイトの監査では省略)

スキルに書かれた「良い」の目安は、TTFBが800ms未満、FCPが1.8秒未満、LCPが2.5秒未満、INPが200ms未満、TBTが200ms未満、CLSが0.1未満です。ただし同じスキルの冒頭が「数値や閾値は古い可能性があるので、引用するなら取得を優先する」と断っています。基準値を報告に載せるときは、web.devで裏を取る前提で読んでください。

出力の形式も決まっています。Core Web Vitalsの要約表、影響度付きの上位課題、コード断片つきの改善案、見つかったフレームワークとバンドラー、の順です。「推定の短縮が0msの課題は優先しない」「LCPが200msでCLSが0のサイトは、すでに優秀だと言い切る」といった指針があり、改善案を水増ししにくい作りです。

workers-profilingスキルは本番のpprofを読ませる

workers-profilingは、デプロイ済みのWorkerやDurable ObjectのCPU使用量とメモリ割り当てを調べ、最適化につなげるスキルです。手順は次の流れです。

  1. 症状(CPU使用量、レイテンシ、割り当ての圧力、メモリの増加)と対象を特定する
  2. アカウント、Worker、環境、デプロイ済みバージョンを利用者と確認する。DOならインスタンスも
  3. 現行ガイドが対応するプロファイル種別から、CPUかヒープを選ぶ
  4. できれば cf CLIで取得する。無ければインストールするかを利用者に尋ねる

取得するとpprofファイルが返り、Claudeが直接読むか、Goの pprof のようなツールで解析します。ファイル名や関数名が生成後のJavaScriptを指しているときは、ソースマップを有効にして取り直すよう提案する指示もあります。報告は、ファイル・関数・位置・単位付きの指標という証拠と、効果を確かめる方法を添えた最小の修正案という形式です。

プロファイルの取得は本番のWorkerに触れる操作です。対象の取り違えを避けるため、スキルが確認を求める項目(アカウント、Worker、環境、バージョン)は、依頼文にも最初から書いておくとやり取りが短くなります。

任せる前に決めておく設定

スキルは動作を方向づけますが、権限は変えません。導入後は次の2点を決めておくと運用が安定します。

1つ目は、スキルが前提とする判断材料をCLAUDE.mdに書くことです。どの設定ファイルを使うか、既定の環境、シークレットの扱いを書いておけば、wranglerスキルの「環境と対象を確かめる」手順が短く済みます。

## Cloudflare
- 設定ファイル: wrangler.jsonc(cloudflare.config.ts は使っていない)
- デプロイ対象の既定は staging。production は必ず確認を取る
- シークレットは wrangler secret put のみ。値をチャットや引数に出さない
- Durable Objects の調整単位は「店舗ID×日付」

2つ目は、チーム全体に配るかどうかです。全員に同じスキルを入れるなら、マーケットプレイスの必須化と自動更新を設定します。手順はプラグインマーケットプレイスの必須化にあります。

どのスキルから始めるか

作業別に、最初に頼む先を並べると次のようになります。

  • 既存のWorkerをデプロイ・設定したい: wrangler
  • 状態を持つ処理を設計・レビューしたい: durable-objects
  • 本番のCPUやメモリの重さを調べたい: workers-profiling
  • ページの表示速度を診断したい: web-perf(別途Chrome DevTools MCPが要る)
  • どの製品を使えばよいか分からない: cloudflare(入口のスキル)

スキルは「公式の手順に沿って動く」ための指示です。権限、認証、本番への反映は別に管理する、という分担を決めたうえで任せると、Cloudflare周りの定型作業をClaude Codeに寄せやすくなります。

まとめ

cloudflareプラグインは、導入が2コマンドで済み、スキル19本とMCPサーバー1本が揃います。wranglerが「wranglerを使わない場面」を先に判定し、durable-objectsが7つの設計規則を持ち込み、web-perfとworkers-profilingが計測から報告までの形式を決めている、という違いが読みどころです。

権限の絞り込みはスキルの外にあります。Wranglerを使う前に許可ルールの設計を済ませ、web-perfを使うならChrome DevTools MCPを別に用意しておくと、最初の依頼からつまずきません。

この記事を共有:XはてブLinkedIn

関連する記事

Claude Code をもっと見る →