/ 디렉터리 / 플레이그라운드 / 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와 조합해 10배 효율

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
호출당 토큰
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 읽기

🐙 열린 이슈 보기

🔍 400+ MCP 서버 및 Skills 전체 보기