/ 目錄 / 演練場 / 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

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

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

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

前置條件
  • 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 的 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