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

claude-skills

作者 secondsky · secondsky/claude-skills

Cloudflare、React、Tailwind v4、AI統合に対応した本番環境向けClaude Codeスキル — モダンなフルスタックバンドルです。

Cloudflare + React + Tailwind v4 + AIスタックに特化したスキルセットです。2026年に実際にリリースされるものに焦点を当てています:Cloudflare上のWorkers、D1、R2、Pages、フロントエンドのReact 19 + Tailwind v4、プロバイダー非依存のAI統合パターン。

なぜ使うのか

主な機能

ライブデモ

実際の動作

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

インストール

クライアントを選択

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

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

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

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

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

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

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

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

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

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

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

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

claude mcp add claude-skill-5 -- git clone https://github.com/secondsky/claude-skills ~/.claude/skills/claude-skills

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

ユースケース

実用的な使い方: claude-skills

1セッションでCloudflareホスティングのReactアプリをリリースする

👤 CFスタックで開発する開発者 ⏱ ~60 min intermediate

使うタイミング: Cloudflareのドキュメントを5つも読まずに、Workers + Pages + D1を接続したいとき。

前提条件
  • Cloudflareアカウント + wrangler — npm i -g wrangler; wrangler login
  • スキルのインストール — git clone https://github.com/secondsky/claude-skills ~/.claude/skills/claude-skills
フロー
  1. スキャフォールド
    Use claude-skills. Scaffold a React 19 + Tailwind v4 app deployed to Cloudflare Pages with a Workers API and D1 DB.✓ コピーしました
    → apps/web、apps/api(Worker)、wrangler.tomlを含むモノレポ構成
  2. 機能追加
    Add a 'notes' feature — D1 schema, CRUD Worker endpoints, React UI with Tailwind v4 styling.✓ コピーしました
    → マイグレーション + Worker + Reactページ
  3. デプロイ
    Deploy to Cloudflare.✓ コピーしました
    → wrangler deployの出力、URLが返される

結果: 1時間以内にライブURLが完成。

注意点
  • 環境間でのWranglerコンフィグの差異 — 最初からwrangler environmentsを使用 — dev/staging/prodセクションを分ける
組み合わせ: cloudflare · cloudflare-api

Tailwind v3プロジェクトをv4に移行する

👤 v3を使用中でv4リリースに対応するチーム ⏱ ~45 min intermediate

使うタイミング: 新しいエンジン + CSSファーストコンフィグに移行したいが、既存を壊したくないとき。

フロー
  1. 現状の監査
    Use claude-skills. Audit my tailwind.config.js for v4 breaking changes.✓ コピーしました
    → 重大度付きの変更リスト
  2. コンフィグの移行
    Convert to v4 CSS-first config with @theme directives.✓ コピーしました
    @themeブロックを含む新しいglobals.css
  3. ユーティリティの修正
    Find v3 utilities that changed or were removed; rewrite usage.✓ コピーしました
    → Grep + 書き換えパス

結果: ビジュアルのリグレッションなしでv4に移行完了。

注意点
  • プラグインエコシステムがまだv4に対応していない — 各プラグインのv4対応状況を確認し、重要なプラグインが未対応の場合はv3に留まる
組み合わせ: filesystem

複数のAIプロバイダーを1つのアダプターでラップする

👤 Claude / GPT / ローカルモデルを書き換えなしで切り替えたい開発者 ⏱ ~45 min advanced

使うタイミング: 1つのプロバイダーにロックインしたくない、クリーンなインターフェースが欲しいとき。

フロー
  1. インターフェース定義
    Use claude-skills ai-adapter pattern. Define a TS interface that abstracts chat completion across Claude, OpenAI, and a local model.✓ コピーしました
    → インターフェース + 3つの実装
  2. ストリーミングの接続
    Add SSE streaming support to the adapter.✓ コピーしました
    → プロバイダー間で一貫したストリーミング実装

結果: 差し替え可能なAIレイヤーの完成。

注意点
  • 過度な抽象化によりプロバイダー固有の機能が失われる — 共有インターフェースと並行して、プロバイダー固有のエスケープハッチを用意する

組み合わせ

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

claude-skill-5 + cloudflare

スキャフォールドで作成されたCFリソースのデプロイと管理

スキャフォールド後、cloudflare MCPを使ってDNSの確認とWorkerログのテールを行う。✓ コピーしました
claude-skill-5 + cloudflare-api

CFコンフィグの一括操作

デプロイ済みPagesプロジェクトのキャッシュルールとWAFを設定する。✓ コピーしました

ツール

このMCPが提供する機能

ツール入力呼び出すタイミングコスト
cf_scaffold app type, features 新規CFアプリ 0
tailwind_migrate v3 config Tailwindのアップグレード 0
ai_adapter_scaffold providers list マルチプロバイダーAIのセットアップ 0

コストと制限

運用コスト

APIクォータ
スキル内でのAPI制限なし
呼び出しあたりのトークン
中程度
金額
Cloudflareには充実した無料枠があり、成長に応じて有料機能を利用
ヒント
ローカルではwrangler devを使用し、クラウドデプロイはステージング/本番に限定する。

セキュリティ

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

認証情報の保管: WranglerがCF認証を処理し、AIプロバイダーのキーはenv / CF secretsで管理
データ送信先: CF、設定したAIプロバイダー

トラブルシューティング

よくあるエラーと対処法

D1 migration fails

Wrangler D1マイグレーションは不安定なため、まず--localで実行してSQLを確認する

確認: wrangler d1 migrations list <db>
Tailwind v4 styles not applying

@sourceディレクティブがコンテンツパスを正しくキャプチャしているか確認する

Deploy succeeds but Worker returns 500

wrangler tailで実際のエラーを確認する

確認: wrangler tail <worker>

代替案

claude-skills 他との比較

代替案代わりに使う場面トレードオフ
Vercel / Next.js stackNextエコシステムを好む場合デプロイモデルと料金体系が異なる
cc-frontend-skillビジュアルアイデンティティを最も重視する場合特定のスタックに依存しない

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

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