/ ディレクトリ / プレイグラウンド / claude-skills
← 全サーバー ↗ GitHub
● コミュニティ 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

インストール

作者のリポジトリ · Claude Skills の公式ドキュメント

ユースケース

実用的な使い方： claude-skills

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

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

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

フロー
  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を見る