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

安裝

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

使用場景

實戰用法： claude-skills

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

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

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

步驟
  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