freemcplab / 디렉터리 / 플레이그라운드 / claude-skills

● 커뮤니티 Jeffallan ⚡ 바로 사용

claude-skills

Name: claude-skills MCP Server
Author: Jeffallan

66 full-stack developer skills across 12 categories — auto-loads the right reference when you ask about NestJS JWT, React hooks, or Postgres indexes.

A focused skill library for full-stack developers. 66 SKILL.md bundles cover languages, backend and frontend frameworks (NestJS, React, etc.), infrastructure, APIs, testing, DevOps, security, data/ML, and platform-specific patterns. Contextual activation means mentioning a specific stack auto-pulls the relevant reference.

▶ 데모 보기 📦 설치 💡 사용 사례

왜 쓰나요

핵심 기능

66 skills organized across 12 full-stack categories
Contextual activation — ask about a concrete stack and the right SKILL.md loads
Covers backend (NestJS, others), frontend (React, others), infra, APIs, testing, DevOps, security, data/ML
Skills Guide doc provides decision trees for which skill applies when
Focused on dev work — no marketing / C-suite distraction

라이브 데모

실제 사용 모습

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

Implement JWT auth in NestJS the idiomatic way

👤 Backend engineers working in NestJS ⏱ ~40 min intermediate

언제 쓸까: You need JWT with refresh tokens and don't want to wire up the passport modules from scratch.

사전 조건

NestJS project — nest new my-app

흐름

Request the implementation

Use the NestJS skill. Add JWT auth with refresh tokens to this project.✓ 복사됨

→ Claude loads the NestJS reference and produces idiomatic module structure (AuthModule, JwtStrategy, guards)
Add tests

Now add e2e tests for the auth endpoints using the testing skill.✓ 복사됨

→ Jest + supertest test files following NestJS conventions

결과: Production-pattern JWT auth with tests.

함정

Claude mixes NestJS decorators with Express middleware patterns — Insist on 'NestJS idioms only — no raw Express'

함께 쓰기: github

Diagnose a React perf regression

👤 Frontend engineers ⏱ ~30 min intermediate

언제 쓸까: A page that was snappy is now janky and React DevTools shows too many re-renders.

흐름

Share the suspect component

Use the React skill. Here's the component tree [paste]. Identify why Settings.tsx re-renders on every keystroke.✓ 복사됨

→ Concrete diagnosis (context provider wrap, unmemoized object prop, etc.) with the fix
Apply + measure

Apply the fix and walk me through how to verify in DevTools.✓ 복사됨

→ Specific profiler steps

결과: A fixed render regression with a reproducible verification.

함정

Wrapping everything in memo/useCallback without measuring — The skill explicitly pushes measure-first

함께 쓰기: chrome-devtools

조합

다른 MCP와 조합해 10배 효율

claude-skill-2 + github

Skill writes code; GitHub MCP opens the PR

Implement the NestJS auth module, then open a PR with the changes.✓ 복사됨

claude-skill-2 + playwright-skill

Frontend skill builds the UI; Playwright skill tests the happy path

Build the new form, then use playwright-skill to write a browser test that submits it.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출
Backend framework skills (NestJS, etc.)	feature request	Backend work in a supported framework
Frontend framework skills (React, etc.)	UI task	Frontend feature work
Testing skills	code to test	Adding or fixing test coverage
DevOps / infra skills	deployment context	Deployment and ops work
Security skills	code or flow to review	Security-sensitive code paths

비용 및 제한

운영 비용

API 쿼터: None
호출당 토큰: 2-6k per skill reference loaded
금액: Free — skills are local
팁: Name the stack in the prompt to load only the relevant skill.

보안

권한, 시크릿, 파급범위

자격 증명 저장: No credentials — skill is prompts

데이터 외부 송신: None

문제 해결

자주 발생하는 오류와 해결

Wrong framework's patterns applied

Name the framework explicitly in the prompt.

Skill not auto-loading on a relevant question

Mention the framework or category — auto-routing across 66 skills is fuzzy.

대안

claude-skills 다른 것과 비교

대안	언제 쓰나	단점/장점
claude-skill (alirezarezvani)	You want PM, marketing, and compliance alongside engineering	Broader but noisier for pure dev work
Framework-specific skills (convexskills, terraform-skill)	You only work in one stack	Deeper in one area, no breadth