/ 目錄 / 演練場 / claude-skills
← 全部伺服器 ↗ GitHub
● 社群 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

安裝

作者儲存庫 · Claude Skills 官方文件

使用場景

實戰用法： claude-skills

在單次工作階段中交付全新的 Cloudflare 託管 React 應用程式

👤 在 CF 技術棧上開發的開發者 ⏱ ~60 min intermediate

何時使用： 你想要直接串接 Workers + Pages + D1，而不必閱讀 5 份 Cloudflare 文件。

步驟
  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 的 Monorepo 結構
  2. 新增功能
    Add a 'notes' feature — D1 schema, CRUD Worker endpoints, React UI with Tailwind v4 styling.✓ 已複製
    → Migration + Worker + React 頁面
  3. 部署
    Deploy to Cloudflare.✓ 已複製
    → wrangler deploy 輸出；回傳 URL

結果： 在一小時內取得上線 URL。

注意事項
  • 不同環境間 Wrangler 設定不同步 — 從一開始就使用 wrangler environments——包含 dev/staging/prod 區段
搭配使用： cloudflare · cloudflare-api

將 Tailwind v3 專案遷移至 v4

👤 正在迎接 v4 版本的 v3 開發團隊 ⏱ ~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 支援狀態；若有關鍵套件落後，則暫緩升級
搭配使用： filesystem

在單一轉接器後方封裝多個 AI 供應商

👤 希望在不重寫程式的情況下切換 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 個實作
  2. 串接串流
    Add SSE streaming support to the adapter.✓ 已複製
    → 跨供應商一致的串流實作

結果： 可隨時替換的 AI 層。

注意事項
  • 過度抽象導致失去供應商特有功能 — 在共用介面旁保留供應商專屬的逃生出口

組合

與其他 MCP 搭配，撬動十倍槓桿

claude-skill-5 + cloudflare

部署並管理鷹架所建立的 CF 資源

After scaffold, use cloudflare MCP to verify DNS and tail Worker logs.✓ 已複製
claude-skill-5 + cloudflare-api

批次 CF 設定操作

Configure cache rules and WAF for the deployed Pages project.✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
cf_scaffold app type, features 建立新的 CF 應用程式時 0
tailwind_migrate v3 config 升級 Tailwind 版本時 0
ai_adapter_scaffold providers list 設定多供應商 AI 時 0

成本與限制

運行它的成本

API 配額
None in skill
每次呼叫 Token 數
Moderate
費用
Cloudflare 提供慷慨的免費方案；隨使用規模擴大可升級付費功能
提示
在本機使用 wrangler dev 進行開發；雲端部署保留給 staging/prod 環境。

安全

權限、密鑰、影響範圍

憑證儲存： Wrangler 負責處理 CF 驗證；AI 供應商金鑰透過環境變數 / CF secrets 管理
資料出站： CF、以及你所設定的 AI 供應商

故障排查

常見錯誤與修復

D1 migration fails

Wrangler D1 migration 有時會出問題；先加上 --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