/ 目錄 / 演練場 / claude-skills
● 社群 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、embeddings)。非常適合獨立開發者和小型團隊在 Cloudflare 技術棧上快速交付產品。

為什麼要用

核心特性

即時演示

實際使用效果

claude-skill-3.replay ▶ 就緒
0/0

安裝

選擇你的客戶端

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

開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。

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

Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

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

點擊 Cline 側欄中的 MCP Servers 圖示,然後選 "Edit Configuration"。

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

格式與 Claude Desktop 相同。重啟 Windsurf 生效。

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

Continue 使用伺服器物件陣列,而非映射。

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

加入 context_servers。Zed 儲存後熱重載。

claude mcp add claude-skill-3 -- git clone https://github.com/jezweb/claude-skills ~/.claude/skills/claude-skills

一行命令搞定。用 claude mcp list 驗證,claude mcp remove 移除。

使用場景

實戰用法: claude-skills

如何在 Cloudflare Worker 上部署以 D1 為後端的 API

👤 希望不需要樣板程式碼就能建立 Worker+D1 API 的全端開發者 ⏱ ~45 min intermediate

何時使用: 你想要一個小型 JSON API,具備驗證與資料持久化,並部署到 Cloudflare。

前置條件
  • Skill installed — git clone https://github.com/jezweb/claude-skills ~/.claude/skills/jezweb-skills
  • wrangler CLI — npm i -g wrangler && wrangler login
步驟
  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.✓ 已複製
    → 部署完成後的 Live URL

結果: 一個已部署、具備 D1 資料持久化的 Worker API。

注意事項
  • D1 migrations 在不同環境間出現落差 — 使用 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. 修復不相容的 utilities
    Grep the codebase for removed/renamed utility classes and produce a replace map.✓ 已複製
    → Codemod 建議

結果: 一個可供審查的 v4 遷移 PR。

注意事項
  • PostCSS pipeline 與 v4 原生引擎發生衝突 — 移除已被 v4 引擎取代的 PostCSS 外掛

在 Workers 上建置輕量 RAG 端點

👤 想要為 Cloudflare 應用程式加入 AI 功能的開發者 ⏱ ~90 min advanced

何時使用: 你想要實作 RAG,但不想另外建立向量資料庫服務。

步驟
  1. 設定 Vectorize
    Provision a Vectorize index for embeddings. Use OpenAI text-embedding-3-small.✓ 已複製
    → wrangler vectorize create + binding 設定
  2. 建立 ingest 腳本
    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.✓ 已複製
    → 完整的端對端路由

結果: 一個輕量但真實可用的 RAG 端點,部署在 Cloudflare 上。

注意事項
  • 分塊太大會降低召回率;太小則損害上下文品質 — 從 512 個 token 開始,重疊 64 個;根據你的語料庫調整

組合

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

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/embeddings 時 Claude tokens

成本與限制

運行它的成本

API 配額
技能層級本身不佔用 API 配額
每次呼叫 Token 數
每項任務約 5-20k tokens
費用
技能本身免費;Cloudflare 及 OpenAI/Anthropic 各有其獨立定價
提示
Cloudflare 免費方案足以支撐小型 Worker API;大規模使用時需注意 Vectorize 的費用。

安全

權限、密鑰、影響範圍

憑證儲存: 技能層級本身不儲存任何憑證。CF 金鑰由 Wrangler 管理。
資料出站: 部署內容傳送至 Cloudflare;AI 呼叫傳送至所設定的服務提供商

故障排查

常見錯誤與修復

wrangler deploy fails on route

路由規則需要該 zone 已在你的 CF 帳號中;請確認 routes 設定,或改用 workers.dev 備用網域

驗證: wrangler deployments list
D1 migrations apply locally but not remote

需明確執行 wrangler d1 migrations apply <DB> --remote

替代方案

claude-skills 對比其他方案

替代方案何時用它替代權衡
Vercel + Next.js template你偏好 Vercel 的開發體驗定價模式與平台能力有所不同

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills