/ 目录 / 演练场 / claude-skills
● 社区 jezweb ⚡ 即开即用

claude-skills

作者 jezweb · jezweb/claude-skills

Full-stack Claude Code skills for Cloudflare, React, Tailwind v4, and AI integrations — opinionated and current.

Jezweb's claude-skills is a pragmatic set of full-stack skills focused on Cloudflare (Workers, D1, R2, KV), modern React, Tailwind v4 upgrades, and common AI integrations (OpenAI, Anthropic, embeddings). Good fit for solo devs and small teams shipping on the Cloudflare stack.

为什么要用

核心特性

实时演示

实际使用效果

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

How to ship a Cloudflare Worker API with D1 backing

👤 Full-stack devs wanting a Worker+D1 API without boilerplate ⏱ ~45 min intermediate

何时使用: You want a small JSON API with auth and persistence, deployed to Cloudflare.

前置条件
  • Skill installed — git clone https://github.com/jezweb/claude-skills ~/.claude/skills/jezweb-skills
  • wrangler CLI — npm i -g wrangler && wrangler login
步骤
  1. Scaffold
    Use the Cloudflare skill. New Worker with D1 binding, Hono router, routes: GET /todos, POST /todos, DELETE /todos/:id.✓ 已复制
    → Worker code + wrangler.toml + schema.sql
  2. Auth
    Add bearer token auth using a secret in env.✓ 已复制
    → Middleware + wrangler secret put instructions
  3. Deploy
    wrangler d1 execute + wrangler deploy steps.✓ 已复制
    → Live URL after deploy

结果: A deployed Worker API with D1 persistence.

注意事项
  • D1 migrations drift between envs — Use wrangler d1 migrations create + apply; don't ad-hoc exec

Upgrade a Tailwind v3 project to v4

👤 Frontend devs on v3 wanting to move to v4's new engine ⏱ ~60 min intermediate

何时使用: You're on tailwind@3 and want to adopt v4's Oxide engine + CSS-first config.

步骤
  1. Audit current config
    Audit tailwind.config.{js,ts} for anything that doesn't port 1:1 to v4.✓ 已复制
    → Per-config-key migration notes
  2. Generate v4 config
    Produce the v4 equivalent: @theme in a CSS entry + package updates.✓ 已复制
    → CSS entry + package.json diff
  3. Fix breaking utilities
    Grep the codebase for removed/renamed utility classes and produce a replace map.✓ 已复制
    → Codemod suggestions

结果: A v4 migration PR ready for review.

注意事项
  • PostCSS pipeline conflicts with v4's native engine — Remove PostCSS plugins that v4's engine replaces

Build a lightweight RAG endpoint on Workers

👤 Devs adding AI features to a Cloudflare app ⏱ ~90 min advanced

何时使用: You want RAG without standing up a vector DB service.

步骤
  1. Set up Vectorize
    Provision a Vectorize index for embeddings. Use OpenAI text-embedding-3-small.✓ 已复制
    → wrangler vectorize create + binding
  2. Ingest script
    Write a Worker route /ingest that chunks + embeds + upserts.✓ 已复制
    → Worker code with chunking heuristic
  3. Query route
    Write /query that embeds the question, retrieves top-k, and calls Claude/OpenAI with the context.✓ 已复制
    → End-to-end route

结果: A small but real RAG endpoint deployed on Cloudflare.

注意事项
  • Chunks too large lose recall; too small hurt context — Start 512 tokens, overlap 64; tune based on your corpus

组合

与其他 MCP 搭配,撬动十倍杠杆

claude-skill-3 + claude-code-owasp-skill

Security-review Worker auth and RAG endpoints

After scaffolding the Worker with auth, run OWASP review on the auth middleware.✓ 已复制

工具

此 MCP 暴露的能力

工具输入参数何时调用成本
Cloudflare Worker scaffolding - New worker projects Claude tokens
D1 + R2 + KV patterns - Persistence wiring Claude tokens
React RSC patterns - RSC-era apps Claude tokens
Tailwind v4 migration - v3→v4 upgrades Claude tokens
AI integrations - OpenAI/Anthropic/embeddings Claude tokens

成本与限制

运行它的成本

API 配额
None at skill level
每次调用 Token 数
5-20k per task
费用
Free skill; Cloudflare + OpenAI/Anthropic have their own pricing
提示
Cloudflare free tier covers small Worker APIs; watch Vectorize cost at scale.

安全

权限、密钥、影响范围

凭据存储: No credentials at skill level. Wrangler handles CF secrets.
数据出站: Deploys go to Cloudflare; any AI calls go to the configured provider

故障排查

常见错误与修复

wrangler deploy fails on route

Route patterns require the zone to be in your CF account; check routes vs. workers.dev fallback

验证: wrangler deployments list
D1 migrations apply locally but not remote

Run wrangler d1 migrations apply <DB> --remote explicitly

替代方案

claude-skills 对比其他方案

替代方案何时用它替代权衡
Vercel + Next.js templateYou prefer Vercel's DXDifferent pricing and platform capabilities

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills