claude-skills — インストール & ライブデモ

なぜ使うのか

主な機能

Cloudflare Workers / D1 / R2 / Pagesのスキャフォールディング
React 19のイディオム（該当箇所ではServer Componentsを活用）
Tailwind v4のコンフィグ + デザイントークン
AI統合アダプター（マルチプロバイダー対応）
本番環境向け — チュートリアルレベルのスケッチではありません

ライブデモ

実際の動作

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

0/0

インストール

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

ユースケース

実用的な使い方： claude-skills

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

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

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

フロー

スキャフォールド

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を含むモノレポ構成
機能追加

Add a 'notes' feature — D1 schema, CRUD Worker endpoints, React UI with Tailwind v4 styling.✓ コピーしました

→ マイグレーション + Worker + Reactページ
デプロイ

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ファーストコンフィグに移行したいが、既存を壊したくないとき。

フロー

現状の監査

Use claude-skills. Audit my tailwind.config.js for v4 breaking changes.✓ コピーしました

→ 重大度付きの変更リスト
コンフィグの移行

Convert to v4 CSS-first config with @theme directives.✓ コピーしました

→ @themeブロックを含む新しいglobals.css
ユーティリティの修正

Find v3 utilities that changed or were removed; rewrite usage.✓ コピーしました

→ Grep + 書き換えパス

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

注意点

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

組み合わせ： filesystem

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

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

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

フロー

インターフェース定義

Use claude-skills ai-adapter pattern. Define a TS interface that abstracts chat completion across Claude, OpenAI, and a local model.✓ コピーしました

→ インターフェース + 3つの実装
ストリーミングの接続

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アプリ
tailwind_migrate	v3 config	Tailwindのアップグレード
ai_adapter_scaffold	providers list	マルチプロバイダーAIのセットアップ

コストと制限

運用コスト

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

セキュリティ

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

認証情報の保管： WranglerがCF認証を処理し、AIプロバイダーのキーはenv / CF secretsで管理

データ送信先： CF、設定したAIプロバイダー

APIキーにはCF secrets（wrangler secret put）を使用し、.dev.varsは絶対にコミットしないこと。

トラブルシューティング

よくあるエラーと対処法

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 stack	Nextエコシステムを好む場合	デプロイモデルと料金体系が異なる
cc-frontend-skill	ビジュアルアイデンティティを最も重視する場合	特定のスタックに依存しない

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

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