/ 目錄 / 演練場 / claude-skills
● 社群 Jeffallan ⚡ 即開即用

claude-skills

作者 Jeffallan · Jeffallan/claude-skills

涵蓋 12 個類別的 66 項全端開發者技能 — 當你詢問 NestJS JWT、React hooks 或 Postgres 索引時,自動載入對應的參考資料。

專為全端開發者設計的技能函式庫。66 個 SKILL.md 套件涵蓋程式語言、後端與前端框架(NestJS、React 等)、基礎設施、API、測試、DevOps、資安、資料/ML 及平台專屬模式。情境式啟動機制讓你只需提到特定技術棧,就能自動載入相關參考資料。

為什麼要用

核心特性

即時演示

實際使用效果

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

安裝

選擇你的客戶端

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

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

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

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

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

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

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

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

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

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

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

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

claude mcp add claude-skill-2 -- git clone https://github.com/Jeffallan/claude-skills ~/.claude/skills/claude-skills

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

使用場景

實戰用法: claude-skills

以慣用方式在 NestJS 中實作 JWT 驗證

👤 使用 NestJS 的後端工程師 ⏱ ~40 min intermediate

何時使用: 你需要支援 refresh token 的 JWT,但不想從頭手動串接 passport 模組。

前置條件
  • NestJS 專案 — nest new my-app
步驟
  1. 請求實作
    Use the NestJS skill. Add JWT auth with refresh tokens to this project.✓ 已複製
    → Claude 載入 NestJS 參考資料,產出慣用的模組結構(AuthModule、JwtStrategy、guards)
  2. 新增測試
    Now add e2e tests for the auth endpoints using the testing skill.✓ 已複製
    → 遵循 NestJS 慣例的 Jest + supertest 測試檔案

結果: 符合生產環境模式的 JWT 驗證,並附有測試。

注意事項
  • Claude 將 NestJS 裝飾器與 Express 中介軟體模式混用 — 明確要求「僅使用 NestJS 慣用寫法 — 不使用原生 Express」
搭配使用: github

診斷 React 效能退化問題

👤 前端工程師 ⏱ ~30 min intermediate

何時使用: 原本流暢的頁面變得卡頓,且 React DevTools 顯示過多不必要的重新渲染。

步驟
  1. 分享可疑元件
    Use the React skill. Here's the component tree [paste]. Identify why Settings.tsx re-renders on every keystroke.✓ 已複製
    → 具體診斷結果(如 context provider 包裝、未記憶化的物件 prop 等)及修復方式
  2. 套用修復並驗證
    Apply the fix and walk me through how to verify in DevTools.✓ 已複製
    → 具體的 Profiler 操作步驟

結果: 修復渲染退化問題,並有可重現的驗證方式。

注意事項
  • 不先測量就對所有東西套用 memo/useCallback — 此技能明確要求先測量再優化
搭配使用: chrome-devtools

組合

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

claude-skill-2 + github

技能撰寫程式碼;GitHub MCP 開啟 PR

Implement the NestJS auth module, then open a PR with the changes.✓ 已複製
claude-skill-2 + playwright-skill

前端技能建構 UI;Playwright 技能測試主要流程

Build the new form, then use playwright-skill to write a browser test that submits it.✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
Backend framework skills (NestJS, etc.) feature request 在支援的框架中進行後端開發 0
Frontend framework skills (React, etc.) UI task 前端功能開發 0
Testing skills code to test 新增或修復測試覆蓋率 0
DevOps / infra skills deployment context 部署與維運工作 0
Security skills code or flow to review 涉及資安敏感的程式碼路徑 0

成本與限制

運行它的成本

API 配額
每次呼叫 Token 數
每次載入技能參考資料約 2-6k tokens
費用
免費 — 技能為本機資源
提示
在提示詞中指定技術棧,僅載入相關技能以節省用量。

安全

權限、密鑰、影響範圍

憑證儲存: 無需憑證 — 技能內容為提示詞
資料出站:

故障排查

常見錯誤與修復

Wrong framework's patterns applied

在提示詞中明確指定框架名稱。

Skill not auto-loading on a relevant question

提及框架或類別名稱 — 在 66 項技能中自動路由的準確度有限。

替代方案

claude-skills 對比其他方案

替代方案何時用它替代權衡
claude-skill (alirezarezvani)你需要在工程以外同時涵蓋產品管理、行銷與合規相關技能涵蓋範圍更廣,但對純開發工作而言較為雜亂
Framework-specific skills (convexskills, terraform-skill)你只使用單一技術棧在特定領域更深入,但缺乏廣度

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

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