binary-agents 1.0.19 → 1.0.21

package/bin/cli.js

@@ -1,50 +1,90 @@
 #!/usr/bin/env node
 
-import { Command } from 'commander';
+import { select } from '@inquirer/prompts';
 import { syncSubagents, listSubagents } from '../src/sync.js';
 import chalk from 'chalk';
 
-const program = new Command();
-
-program
-  .name('binary-agents')
-  .description('Sync Claude Code subagents from 01-binary/subagents repository')
-  .version('1.0.0');
-
-program
-  .command('sync')
-  .description('Sync agents and commands to .claude/ (local) or ~/.claude/ (global)')
-  .option('-g, --global', 'Install to ~/.claude/ instead of current directory')
-  .option('--agents', 'Sync only agents (subagents)')
-  .option('--commands', 'Sync only commands (slash commands)')
-  .option('-c, --clean', 'Remove existing files before sync')
-  .action(async (options) => {
-    // --agents 또는 --commands가 명시되지 않으면 둘 다 동기화
-    const syncAgents = options.agents || (!options.agents && !options.commands);
-    const syncCommands = options.commands || (!options.agents && !options.commands);
-
-    const result = await syncSubagents({
-      global: options.global || false,
-      agents: syncAgents,
-      commands: syncCommands,
-      clean: options.clean || false
+async function main() {
+  const args = process.argv.slice(2);
+
+  // list 명령어는 바로 실행
+  if (args[0] === 'list') {
+    await listSubagents();
+    return;
+  }
+
+  // help 또는 --help
+  if (args[0] === 'help' || args[0] === '--help' || args[0] === '-h') {
+    showHelp();
+    return;
+  }
+
+  // 대화형 설치 시작
+  console.log(chalk.blue.bold('\n🤖 Binary Agents 설치\n'));
+
+  try {
+    // 1. 설치 위치 선택
+    const location = await select({
+      message: '어디에 설치하시겠습니까?',
+      choices: [
+        { name: '현재 프로젝트 (.claude/)', value: 'local' },
+        { name: '전역 (~/.claude/)', value: 'global' }
+      ]
+    });
+
+    // 2. 설치 항목 선택
+    const items = await select({
+      message: '무엇을 설치하시겠습니까?',
+      choices: [
+        { name: '모두 (에이전트 + 명령어)', value: 'all' },
+        { name: '에이전트만', value: 'agents' },
+        { name: '명령어만', value: 'commands' }
+      ]
     });
 
+    // 3. 기존 파일 삭제 여부
+    const clean = await select({
+      message: '기존 파일을 삭제하고 새로 설치할까요?',
+      choices: [
+        { name: '예 (기존 파일 삭제)', value: true },
+        { name: '아니오 (기존 파일 유지)', value: false }
+      ]
+    });
+
+    // 옵션 구성
+    const options = {
+      global: location === 'global',
+      agents: items === 'all' || items === 'agents',
+      commands: items === 'all' || items === 'commands',
+      clean
+    };
+
+    // 동기화 실행
+    const result = await syncSubagents(options);
+
     if (!result.success) {
       process.exit(1);
     }
-  });
-
-program
-  .command('list')
-  .description('List available agents and commands')
-  .action(async () => {
-    await listSubagents();
-  });
+  } catch (error) {
+    // Ctrl+C로 취소한 경우
+    if (error.name === 'ExitPromptError') {
+      console.log(chalk.yellow('\n\n취소되었습니다.\n'));
+      process.exit(0);
+    }
+    throw error;
+  }
+}
 
-// 기본 명령어가 없으면 help 표시
-if (process.argv.length === 2) {
-  program.help();
+function showHelp() {
+  console.log(chalk.blue.bold('\n🤖 Binary Agents\n'));
+  console.log('Claude Code 서브에이전트 및 슬래시 명령어 설치 도구\n');
+  console.log(chalk.yellow('사용법:'));
+  console.log('  npx binary-agents        대화형 설치');
+  console.log('  npx binary-agents list   사용 가능한 에이전트/명령어 목록');
+  console.log('  npx binary-agents help   도움말 표시\n');
 }
 
-program.parse();
+main().catch(error => {
+  console.error(chalk.red(`\n오류: ${error.message}\n`));
+  process.exit(1);
+});

package/commands/code-review.md

@@ -29,6 +29,7 @@ Task 도구를 통해 다음 전문 에이전트를 사용할 수 있습니다:
 | `junior-checker` | 주니어 개발자 관점 가독성, 네이밍, 복잡도 | opus |
 | `fundamentals-code` | Toss Frontend Fundamentals 기반 (가독성, 예측 가능성, 응집도, 결합도) | opus |
 | `react-performance-optimizer` | React 리렌더, 메모이제이션, 훅 최적화 | opus |
+| `react-principles-reviewer` | React 개발 원칙 (응집도/명시성, Props 관리, 네이밍, 부수효과, AsyncBoundary) | opus |
 
 ## 사용 가능한 Skill
 
@@ -42,8 +43,10 @@ Skill은 사용자 설치에 따라 다르며 추가 리뷰 가이드라인/컨
 ## 작업 순서
 
 1. **리뷰 범위 결정**
-   - 특정 경로가 제공되면 해당 경로에 집중
-   - 경로가 없으면 최근 변경된 파일 리뷰 또는 사용자에게 대상 요청
+   - **경로가 제공된 경우:** 해당 경로의 모든 파일을 리뷰
+   - **경로가 없는 경우:** 현재 작업 디렉토리 전체를 리뷰
+
+   > **중요:** git 변경사항에 제한하지 마세요. 대상 경로의 모든 파일을 리뷰합니다.
 
 2. **사용자에게 리뷰 유형 질문** (AskUserQuestion 사용)
 
@@ -51,7 +54,7 @@ Skill은 사용자 설치에 따라 다르며 추가 리뷰 가이드라인/컨
 
    | 옵션 | 이름 | 사용 에이전트 | 적합한 상황 |
    |------|------|--------------|-------------|
-   | 1 | **전체 리뷰** | 모든 5개 에이전트 병렬 실행 | 종합 코드 리뷰 (권장) |
+   | 1 | **전체 리뷰** | 모든 6개 에이전트 병렬 실행 | 종합 코드 리뷰 (권장) |
    | 2 | **커스텀** | 사용자가 직접 선택 | 특정 관점만 리뷰하고 싶을 때 |
 
 3. **Skill 포함 여부 질문** (AskUserQuestion 사용)
@@ -174,6 +177,8 @@ Task(code-reviewer): "src/components 코드를 리뷰하세요. 아키텍처,
 Task(fundamentals-code): "src/components를 Toss Frontend Fundamentals 원칙으로 분석하세요. 가독성, 예측 가능성, 응집도, 결합도를 확인하세요. file:line 참조와 함께 발견사항을 반환하세요."
 
 Task(refactor-analyzer): "src/components의 리팩토링 기회를 분석하세요. 코드 중복, 복잡성, 추상화 기회를 확인하세요. file:line 참조와 함께 발견사항을 반환하세요."
+
+Task(react-principles-reviewer): "src/components를 React 개발 원칙으로 리뷰하세요. 응집도/명시성 패턴, Props 관리, 네이밍 원칙, 부수효과 위치, AsyncBoundary 사용을 확인하세요. file:line 참조와 함께 발견사항을 반환하세요."
 ```
 
 ### Skill 로드 (Skill 도구)
@@ -194,3 +199,4 @@ Skill(<skill-name>): 리뷰 중 이 skill의 가이드라인을 적용하기 위
 - **file:line 참조 보존** - 실행 가능한 피드백을 위해 필수
 - **한국어 출력** - 최종 리포트는 한국어로
 - **AI attribution 금지** - "Generated by AI" footer 추가 금지
+- **결과 파일 저장** - 최종 리포트를 `code-review.md` 파일로 저장 (이미 존재하면 `---` 구분선과 함께 하단에 추가)

package/commands/design-to-code.md

@@ -0,0 +1,282 @@
+---
+description: 설계/요구사항을 분석하여 구현 계획 생성
+allowed-tools: Task, Read, Glob, Grep
+---
+
+# Design to Code
+
+대화 컨텍스트의 설계/요구사항을 분석하고, 코드베이스를 탐색하여 구체적인 구현 계획을 생성합니다.
+
+## 컨텍스트 정보
+
+**현재 프로젝트 타입 감지:**
+!`if [ -f "package.json" ] && grep -q '"react"' package.json 2>/dev/null; then echo "React 프로젝트"; else echo "일반 프로젝트"; fi`
+
+**package.json 주요 의존성:**
+!`cat package.json 2>/dev/null | grep -A 20 '"dependencies"' | head -25 || echo "package.json 없음"`
+
+---
+
+## 작업 순서
+
+### 1. 설계/요구사항 확인
+
+대화 컨텍스트에서 설계 또는 요구사항 확인:
+- 이전 메시지에서 설계 문서, 기능 명세, 요구사항 찾기
+- 없으면 → "구현할 설계나 요구사항을 먼저 설명해주세요" 안내
+
+**확인할 내용:**
+- 구현 목표 (무엇을 만들어야 하는가?)
+- 주요 기능 목록
+- 제약 조건 (기술 스택, 성능, 호환성 등)
+- 참고할 기존 코드나 패턴
+
+### 2. 코드베이스 분석 (Explore 에이전트)
+
+Task 도구로 Explore 에이전트 실행:
+
+```
+Task(Explore): "프로젝트 구조를 분석하세요:
+1. 폴더 구조 및 아키텍처 패턴 파악
+2. 기존 컴포넌트/모듈 구조 확인
+3. 공통 유틸리티, 훅, 컴포넌트 식별
+4. 코딩 컨벤션 및 네이밍 패턴 파악
+5. [설계와 관련된 기존 코드] 찾기"
+```
+
+### 3. 구현 계획 수립 (Plan 에이전트)
+
+Task 도구로 Plan 에이전트 실행:
+
+```
+Task(Plan): "다음 설계를 구현하기 위한 계획을 수립하세요:
+
+[설계/요구사항 요약]
+
+코드베이스 분석 결과:
+[Explore 결과 요약]
+
+다음을 포함한 구현 계획 작성:
+1. 단계별 구현 순서
+2. 생성/수정할 파일 목록
+3. 각 파일의 주요 구현 내용
+4. 의존성 및 임포트 관계
+5. 테스트 전략
+6. 주의사항 및 엣지 케이스"
+```
+
+### 4. 설계 원칙 검증 (에이전트 병렬 실행)
+
+설계의 품질을 검증하기 위해 에이전트들을 병렬로 실행:
+
+**필수 에이전트:**
+
+| 에이전트 | 검증 내용 |
+|----------|----------|
+| `fundamentals-code` | 가독성, 예측 가능성, 응집도, 결합도 관점에서 설계 검증 |
+| `refactor-analyzer` | 추상화 기회, 재사용 가능한 컴포넌트 식별 |
+
+**조건부 에이전트 (React 프로젝트):**
+
+| 에이전트 | 검증 내용 |
+|----------|----------|
+| `react-principles-reviewer` | 컴포넌트 구조, Props 설계, 상태 관리 전략 검증 |
+
+**React 프로젝트 감지 방법:**
+```bash
+# 다음 중 하나라도 해당되면 React 프로젝트
+- package.json에 "react" 또는 "next" 의존성 존재
+- .tsx 또는 .jsx 파일 존재
+```
+> Next.js, Remix 등 React 기반 프레임워크도 자동 감지됩니다.
+
+**에이전트 실행 예시:**
+
+```
+// 필수 에이전트 (항상 실행)
+Task(fundamentals-code): "다음 구현 계획을 Toss Frontend Fundamentals 원칙으로 검증하세요:
+[Plan 결과]
+가독성, 예측 가능성, 응집도, 결합도 관점에서 개선점을 제안하세요."
+
+Task(refactor-analyzer): "다음 구현 계획에서 추상화 기회를 분석하세요:
+[Plan 결과]
+재사용 가능한 컴포넌트, 공통 유틸리티, 중복 제거 가능한 부분을 식별하세요."
+
+// React 프로젝트면 추가
+Task(react-principles-reviewer): "다음 구현 계획을 React 개발 원칙으로 검증하세요:
+[Plan 결과]
+컴포넌트 응집도, Props 설계, 상태 관리 전략, 부수효과 위치를 검토하세요."
+```
+
+### 5. 결과 종합 및 최종 계획 생성
+
+모든 에이전트 결과를 종합하여 최종 구현 계획 작성.
+
+---
+
+## 출력 형식
+
+```markdown
+# 구현 계획: [기능명]
+
+## 요약
+- **목표:** [구현 목표 1줄 요약]
+- **예상 파일 수:** N개 (신규: X, 수정: Y)
+- **프로젝트 타입:** [React/일반]
+- **검증 에이전트:** [실행된 에이전트 목록]
+
+---
+
+## 1. 설계 분석
+
+### 요구사항 요약
+[대화에서 파악한 요구사항 정리]
+
+### 제약 조건
+- [제약 1]
+- [제약 2]
+
+---
+
+## 2. 코드베이스 분석 결과
+
+### 프로젝트 구조
+```
+[관련 폴더 구조]
+```
+
+### 참고할 기존 패턴
+| 패턴 | 파일 | 설명 |
+|------|------|------|
+| [패턴명] | [file:line] | [설명] |
+
+### 재사용 가능한 기존 코드
+- [컴포넌트/유틸리티]: [file:line]
+
+---
+
+## 3. 구현 계획
+
+### 단계별 구현 순서
+
+#### Phase 1: [단계명]
+**목표:** [이 단계의 목표]
+
+| 순서 | 작업 | 파일 | 설명 |
+|------|------|------|------|
+| 1 | [작업] | [경로] | [설명] |
+| 2 | [작업] | [경로] | [설명] |
+
+#### Phase 2: [단계명]
+...
+
+### 파일별 상세 구현
+
+#### `src/components/NewComponent.tsx` (신규)
+```tsx
+// 주요 구조 스케치
+interface Props {
+  // ...
+}
+
+export function NewComponent({ ... }: Props) {
+  // 주요 로직 설명
+}
+```
+
+**구현 포인트:**
+- [포인트 1]
+- [포인트 2]
+
+#### `src/hooks/useNewHook.ts` (신규)
+...
+
+---
+
+## 4. 설계 검증 결과
+
+### fundamentals-code 검증
+| 원칙 | 상태 | 피드백 |
+|------|------|--------|
+| 가독성 | ✅/🟡/🔴 | [피드백] |
+| 예측 가능성 | ✅/🟡/🔴 | [피드백] |
+| 응집도 | ✅/🟡/🔴 | [피드백] |
+| 결합도 | ✅/🟡/🔴 | [피드백] |
+
+### refactor-analyzer 검증
+**추상화 기회:**
+- [기회 1]: [설명]
+- [기회 2]: [설명]
+
+**재사용 제안:**
+- [제안 1]
+
+### react-principles-reviewer 검증 (React 프로젝트)
+| 원칙 | 상태 | 피드백 |
+|------|------|--------|
+| 컴포넌트 응집도 | ✅/🟡/🔴 | [피드백] |
+| Props 설계 | ✅/🟡/🔴 | [피드백] |
+| 상태 관리 | ✅/🟡/🔴 | [피드백] |
+
+---
+
+## 5. 주의사항
+
+### 잠재적 이슈
+- ⚠️ [이슈 1]: [설명 및 대응 방안]
+- ⚠️ [이슈 2]: [설명 및 대응 방안]
+
+### 엣지 케이스
+- [케이스 1]: [처리 방법]
+- [케이스 2]: [처리 방법]
+
+---
+
+## 6. 테스트 전략
+
+### 단위 테스트
+| 대상 | 테스트 케이스 |
+|------|--------------|
+| [컴포넌트/함수] | [테스트 케이스 목록] |
+
+### 통합 테스트
+- [테스트 시나리오 1]
+- [테스트 시나리오 2]
+
+---
+
+## 7. 다음 단계
+
+구현을 시작하려면:
+1. Phase 1부터 순서대로 진행
+2. 각 파일 구현 후 테스트 확인
+3. [추가 안내사항]
+```
+
+---
+
+## 사용 예시
+
+```bash
+# 1. 먼저 설계/요구사항 설명
+"사용자 프로필 페이지를 만들어야 해.
+- 프로필 이미지, 이름, 이메일 표시
+- 프로필 수정 모달
+- 비밀번호 변경 기능
+- 계정 삭제 기능"
+
+# 2. 커맨드 실행
+/design-to-code
+```
+
+---
+
+## 중요 사항
+
+- **컨텍스트 의존**: 대화에서 설계/요구사항을 읽어옴
+- **병렬 실행**: 검증 에이전트들은 병렬로 실행하여 효율성 확보
+- **React 자동 감지**: package.json 또는 파일 확장자로 React 프로젝트 감지
+- **구체적 파일 경로**: 생성/수정할 파일의 정확한 경로 명시
+- **코드 스케치 포함**: 주요 구조와 인터페이스를 코드로 표현
+- **한국어 출력**: 최종 리포트는 한국어로
+- **결과 파일 저장**: 최종 리포트를 `design-to-code.md` 파일로 저장 (이미 존재하면 `---` 구분선과 함께 하단에 추가)

package/commands/figma-check.md

@@ -316,3 +316,4 @@ Figma Variables (`boundVariables`)와 코드 토큰 비교:
 - **수치 비교**: 모든 차이는 수치로 표시 (Figma: 16px vs 코드: 14px)
 - **수정 제안**: 문제만 지적하지 말고 해결책 제시
 - **file:line 참조**: 코드 위치 정확히 표시
+- **결과 파일 저장**: 최종 리포트를 `figma-check.md` 파일로 저장 (이미 존재하면 `---` 구분선과 함께 하단에 추가)

package/commands/review-pr.md

@@ -23,6 +23,7 @@ Task 도구를 통해 다음 전문 에이전트를 사용할 수 있습니다:
 | `refactor-analyzer` | 코드 중복, 복잡성, 추상화 기회, 코드 스멜 |
 | `junior-checker` | 주니어 개발자 관점 가독성, 네이밍, 복잡도 |
 | `react-performance-optimizer` | React 리렌더, 메모이제이션, 훅 최적화 |
+| `react-principles-reviewer` | React 개발 원칙 (응집도/명시성, Props 관리, 네이밍, 부수효과, AsyncBoundary) |
 
 ## 사용 가능한 Skill
 
@@ -54,7 +55,7 @@ Skill은 사용자 설치에 따라 다르며 추가 리뷰 가이드라인/컨
 
    | 옵션 | 이름 | 사용 에이전트 | 적합한 상황 |
    |------|------|--------------|-------------|
-   | 1 | **전체 리뷰** | 모든 5개 에이전트 병렬 실행 | 종합 코드 리뷰 (권장) |
+   | 1 | **전체 리뷰** | 모든 6개 에이전트 병렬 실행 | 종합 코드 리뷰 (권장) |
    | 2 | **커스텀** | 사용자가 직접 선택 | 특정 관점만 리뷰하고 싶을 때 |
 
 3. **Skill 포함 여부 질문** (AskUserQuestion 사용)

package/docs/BUILDER_GUIDE.md

@@ -52,6 +52,7 @@ Builder가 자동으로:
 | `junior-checker` | 주니어 친화성 |
 | `fundamentals-code` | Toss Frontend Fundamentals 기반 분석 |
 | `react-performance-optimizer` | React 성능 최적화 |
+| `react-principles-reviewer` | React 개발 원칙 (응집도/명시성, Props 관리, 네이밍, 부수효과) |
 
 ### 커스터마이징 예시
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "binary-agents",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "description": "Claude Code subagents and slash commands collection with sync CLI tool",
   "type": "module",
   "main": "src/sync.js",
@@ -8,7 +8,7 @@
     "binary-agents": "./bin/cli.js"
   },
   "scripts": {
-    "sync": "node bin/cli.js sync",
+    "start": "node bin/cli.js",
     "list": "node bin/cli.js list",
     "release": "npm version patch && npm publish"
   },
@@ -37,8 +37,8 @@
     "README.md"
   ],
   "dependencies": {
+    "@inquirer/prompts": "^7.0.0",
     "chalk": "^5.3.0",
-    "commander": "^12.0.0",
     "ora": "^8.0.1"
   },
   "engines": {