/ ディレクトリ / プレイグラウンド / claude-skills
● コミュニティ jezweb ⚡ 即起動

claude-skills

作者 jezweb · jezweb/claude-skills

Cloudflare、React、Tailwind v4、AI連携に対応したフルスタック Claude Code スキル — 実用的かつ最新の構成です。

Jezweb の claude-skills は、Cloudflare(Workers、D1、R2、KV)、モダン React、Tailwind v4 アップグレード、主要な AI 連携(OpenAI、Anthropic、エンベディング)に特化した実践的なフルスタックスキルセットです。Cloudflare スタックで開発する個人開発者や小規模チームに最適です。

なぜ使うのか

主な機能

ライブデモ

実際の動作

claude-skill-3.replay ▶ 準備完了
0/0

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "claude-skill-3": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/jezweb/claude-skills",
        "~/.claude/skills/claude-skills"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "claude-skill-3": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/jezweb/claude-skills",
        "~/.claude/skills/claude-skills"
      ],
      "_inferred": true
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "claude-skill-3": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/jezweb/claude-skills",
        "~/.claude/skills/claude-skills"
      ],
      "_inferred": true
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "claude-skill-3": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/jezweb/claude-skills",
        "~/.claude/skills/claude-skills"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "claude-skill-3",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/jezweb/claude-skills",
        "~/.claude/skills/claude-skills"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json
{
  "context_servers": {
    "claude-skill-3": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/jezweb/claude-skills",
          "~/.claude/skills/claude-skills"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add claude-skill-3 -- git clone https://github.com/jezweb/claude-skills ~/.claude/skills/claude-skills

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方: claude-skills

D1 バックエンドを持つ Cloudflare Worker API の構築方法

👤 ボイラープレートなしで Worker+D1 API を構築したいフルスタック開発者 ⏱ ~45 min intermediate

使うタイミング: 認証と永続化を備えた小規模な JSON API を Cloudflare にデプロイしたい場合に使用します。

前提条件
  • スキルのインストール — git clone https://github.com/jezweb/claude-skills ~/.claude/skills/jezweb-skills
  • wrangler CLI — npm i -g wrangler && wrangler login
フロー
  1. スキャフォールド
    Use the Cloudflare skill. New Worker with D1 binding, Hono router, routes: GET /todos, POST /todos, DELETE /todos/:id.✓ コピーしました
    → Worker コード + wrangler.toml + schema.sql
  2. 認証
    Add bearer token auth using a secret in env.✓ コピーしました
    → ミドルウェア + wrangler secret put の手順
  3. デプロイ
    wrangler d1 execute + wrangler deploy steps.✓ コピーしました
    → デプロイ後のライブ URL

結果: D1 永続化を備えたデプロイ済み Worker API。

注意点
  • D1 マイグレーションが環境間でずれる — wrangler d1 migrations create + apply を使用し、アドホックな exec は避ける

Tailwind v3 プロジェクトを v4 にアップグレードする

👤 v3 から v4 の新エンジンに移行したいフロントエンド開発者 ⏱ ~60 min intermediate

使うタイミング: tailwind@3 を使用中で、v4 の Oxide エンジン + CSS ファーストコンフィグを導入したい場合。

フロー
  1. 現行コンフィグの監査
    Audit tailwind.config.{js,ts} for anything that doesn't port 1:1 to v4.✓ コピーしました
    → コンフィグキーごとのマイグレーションノート
  2. v4 コンフィグの生成
    Produce the v4 equivalent: @theme in a CSS entry + package updates.✓ コピーしました
    → CSS エントリ + package.json の差分
  3. 破壊的変更のあるユーティリティを修正
    Grep the codebase for removed/renamed utility classes and produce a replace map.✓ コピーしました
    → コードモッドの提案

結果: レビュー可能な v4 マイグレーション PR。

注意点
  • PostCSS パイプラインが v4 のネイティブエンジンと競合する — v4 のエンジンが代替する PostCSS プラグインを削除する

Workers 上に軽量 RAG エンドポイントを構築する

👤 Cloudflare アプリに AI 機能を追加したい開発者 ⏱ ~90 min advanced

使うタイミング: ベクトル DB サービスを別途立ち上げずに RAG を実現したい場合。

フロー
  1. Vectorize のセットアップ
    Provision a Vectorize index for embeddings. Use OpenAI text-embedding-3-small.✓ コピーしました
    → wrangler vectorize create + バインディング
  2. 取り込みスクリプト
    Write a Worker route /ingest that chunks + embeds + upserts.✓ コピーしました
    → チャンキングヒューリスティックを含む Worker コード
  3. クエリルート
    Write /query that embeds the question, retrieves top-k, and calls Claude/OpenAI with the context.✓ コピーしました
    → エンドツーエンドのルート

結果: Cloudflare 上にデプロイされた小規模ながら実用的な RAG エンドポイント。

注意点
  • チャンクが大きすぎると再現率が低下し、小さすぎるとコンテキストが損なわれる — 512 トークン、オーバーラップ 64 から始めて、コーパスに応じてチューニングする

組み合わせ

他のMCPと組み合わせて10倍の力を

claude-skill-3 + claude-code-owasp-skill

Worker の認証と RAG エンドポイントのセキュリティレビュー

After scaffolding the Worker with auth, run OWASP review on the auth middleware.✓ コピーしました

ツール

このMCPが提供する機能

ツール入力呼び出すタイミングコスト
Cloudflare Worker scaffolding - 新規 Worker プロジェクト Claude tokens
D1 + R2 + KV patterns - 永続化の接続 Claude tokens
React RSC patterns - RSC 時代のアプリ Claude tokens
Tailwind v4 migration - v3→v4 アップグレード Claude tokens
AI integrations - OpenAI/Anthropic/エンベディング連携 Claude tokens

コストと制限

運用コスト

APIクォータ
スキルレベルでの API クォータなし
呼び出しあたりのトークン
タスクあたり 5〜20k トークン
金額
スキル自体は無料。Cloudflare + OpenAI/Anthropic にはそれぞれの料金体系があります
ヒント
Cloudflare の無料枠で小規模な Worker API は十分カバーできます。スケール時は Vectorize のコストに注意してください。

セキュリティ

権限、シークレット、影響範囲

認証情報の保管: スキルレベルではクレデンシャルを保持しません。Cloudflare のシークレットは wrangler が管理します。
データ送信先: デプロイは Cloudflare に送信されます。AI 呼び出しは設定されたプロバイダーに送信されます

トラブルシューティング

よくあるエラーと対処法

wrangler deploy がルートでエラーになる

ルートパターンには CF アカウント内のゾーンが必要です。routes と workers.dev フォールバックの設定を確認してください

確認: wrangler deployments list
D1 migrations がローカルでは適用されるがリモートでは適用されない

wrangler d1 migrations apply <DB> --remote を明示的に実行してください

代替案

claude-skills 他との比較

代替案代わりに使う場面トレードオフ
Vercel + Next.js templateVercel の DX を好む場合料金体系とプラットフォームの機能が異なります

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る