{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/home/user/mediapipe-controller",
        "/home/user/mediapipe-controller/docs"
      ]
    }
  }
}

# 프로젝트 파일 분석 요청
"src/ 디렉토리의 모든 JavaScript 파일을 읽고, 
각 파일이 무슨 역할을 하는지 정리해줘."

# 참고 파일 기반 코드 작성
"docs/references/mediapipe-example.js를 참고해서 
src/js/hand-tracker.js를 작성해줘."

# 코드 리뷰
"src/js/ 안의 모든 파일을 읽고, 
버그나 개선할 점을 찾아줘."

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"],
      "env": {
        "DISPLAY": ":0"
      }
    }
  }
}

# 웹앱 시각적 테스트
"http://localhost:3000을 브라우저로 열고 
스크린샷을 찍어서 레이아웃이 제대로 되는지 확인해줘."

# 웹앱 상호작용 테스트
"카메라 허용 버튼을 클릭하고, 
손 추적이 시작되는지 확인해줘."

# 문서 크롤링
"MediaPipe 공식 문서 페이지를 열고, 
Hand Landmarker API의 사용법을 정리해줘."

# 디렉토리 생성
mkdir -p .claude/commands

# 코드 리뷰 스킬 작성
cat > .claude/commands/review.md << 'EOF'
변경된 파일들을 모두 읽고, 다음 기준으로 코드 리뷰를 해주세요:

1. 버그 가능성이 있는 코드
2. 성능 문제
3. 한국어 주석 누락
4. 변수명 규칙 위반 (camelCase가 아닌 것)

각 이슈를 파일명:라인번호 형식으로 정리해주세요.
EOF

# .claude/commands/osc-test.md
src/js/osc-sender.js를 읽고, 
OSC 메시지 전송 코드에 오류가 없는지 확인해주세요.
특히 다음을 체크:
- OSC 주소 패턴이 /로 시작하는지
- 포트 번호가 올바른지 (Ableton: 11000, TouchDesigner: 7000)
- WebSocket 연결 해제 처리가 있는지

---
# .claude/commands/mediapipe-debug.md
hand-tracker.js의 MediaPipe 초기화 코드를 확인하고:
1. CDN URL이 최신 버전인지
2. 카메라 해상도 설정이 적절한지 (640x480 권장)
3. 에러 핸들링이 되어 있는지
문제가 있으면 수정 코드를 제안해주세요.

# Codex CLI — Plugin 시스템 (2026년 3월 도입)
# MCP 서버, 워크플로우, 통합을 하나의 번들로 패키징
# Box, Figma, Linear, Notion, Sentry, Slack 등 공식 플러그인 제공
codex plugin install slack
codex plugin install figma

# Gemini CLI — Extensions 시스템
# 프롬프트, MCP 서버, 명령, 테마, Hooks, Skills를 번들로 패키징
# Codex Plugin과 유사한 범위
gemini extension install my-extension

# Claude Code — 별도 Plugin 시스템 없음
# 대신 MCP 서버 + Skills + Hooks 조합으로 동일한 확장성 제공
# .mcp.json + .claude/commands/ + settings.json hooks

# 복잡한 작업을 분할하는 프롬프트 예시
"다음 3가지 작업을 각각 독립적으로 처리해줘:

1. src/js/hand-tracker.js: MediaPipe 초기화 및 손 랜드마크 추적
2. src/js/osc-sender.js: OSC 메시지 포맷 및 WebSocket 전송
3. src/js/ui-controller.js: 캔버스에 손 랜드마크 시각화

각 파일은 서로 의존하지 않게 만들어줘. 
나중에 index.html에서 조립할 거야."

# Claude Code에서 Sub Agent를 활성화하는 프롬프트 패턴:

# 패턴 1: 명시적 병렬 처리 요청
"다음 3개 파일을 각각 독립적으로 작성해줘.
서로 의존하지 않으니 병렬로 처리해도 돼."

# 패턴 2: 대규모 리서치 + 구현 분리
"먼저 MediaPipe Hands API 최신 사용법을 조사하고,
동시에 OSC 라이브러리 옵션을 조사해줘.
두 결과를 바탕으로 통합 설계를 해줘."

# 패턴 3: 여러 사용자의 피드백을 반영
"파일 A에는 디자인 수정을, 파일 B에는 로직 수정을,
파일 C에는 테스트 코드를 각각 동시에 추가해줘."

# → Claude Code가 내부적으로 Sub Agent를 생성하여
#   각 작업을 병렬로 처리하고 결과를 취합합니다

// .mcp.json (프로젝트 루트)
{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "./"]
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}

// codex.json 또는 환경변수로 설정
// Codex는 MCP 표준을 지원하며, 
// 설정 파일 위치는 프로젝트 루트의 codex.json
{
  "mcp_servers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "./"]
    }
  }
}

// settings.json 또는 별도의 MCP 설정
// Gemini CLI는 MCP 표준을 채택하여 유사한 형식 사용
{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-filesystem", "./"]
    }
  }
}