binary-agents 1.0.20 → 1.0.22

package/README.md

@@ -9,21 +9,30 @@ Claude Code 서브에이전트 및 슬래시 명령어 컬렉션 + 동기화 도
 ## 사용법
 
 ```bash
-# 현재 프로젝트에 설치 (.claude/)
-npx binary-agents sync
+# 대화형 설치 (권장)
+npx binary-agents
 
-# 전역 설치 (~/.claude/)
-npx binary-agents sync -g
+# 목록 보기
+npx binary-agents list
+```
 
-# 에이전트만 / 명령어만
-npx binary-agents sync --agents
-npx binary-agents sync --commands
+실행하면 대화형으로 설치 옵션을 선택할 수 있습니다:
 
-# 기존 파일 삭제 후 새로 설치
-npx binary-agents sync --clean
+```
+🤖 Binary Agents 설치
 
-# 목록 보기
-npx binary-agents list
+? 어디에 설치하시겠습니까?
+❯ 전역 (~/.claude/)
+  현재 프로젝트 (.claude/)
+
+? 무엇을 설치하시겠습니까?
+❯ 모두 (에이전트 + 명령어)
+  에이전트만
+  명령어만
+
+? 기존 파일을 삭제하고 새로 설치할까요?
+❯ 예 (기존 파일 삭제)
+  아니오 (기존 파일 유지)
 ```
 
 ## 서브에이전트 종류
@@ -35,6 +44,7 @@ npx binary-agents list
 | `junior-checker` | 주니어 개발자 관점 가독성, 네이밍, 복잡도 체크 |
 | `fundamentals-code` | Toss Frontend Fundamentals 기반 (가독성, 예측 가능성, 응집도, 결합도) |
 | `react-performance-optimizer` | React 리렌더, 메모이제이션, 훅 최적화 분석 |
+| `react-principles-reviewer` | React 개발 원칙 (응집도/명시성, Props 관리, 네이밍, 부수효과, AsyncBoundary) |
 | `subagent-builder` | 커스텀 서브에이전트 빌더 |
 
 ## 슬래시 명령어
@@ -46,6 +56,7 @@ npx binary-agents list
 | `/pr` | 브랜치 변경사항 분석 후 PR 자동 생성 |
 | `/review-pr` | PR 링크를 받아 변경사항 분석 후 GitHub 스타일 라인별 코드 리뷰 |
 | `/code-review` | 여러 에이전트를 병렬 실행하여 종합 코드 리뷰 |
+| `/design-to-code` | 설계/요구사항을 분석하여 구현 계획 생성 |
 | `/figma-check` | Figma MCP로 디자인 정보를 가져와 구현 코드와 비교 분석 |
 
 ### /commit 사용법
@@ -103,7 +114,7 @@ Claude가 자동으로:
 Claude가 자동으로:
 1. PR 정보 및 diff 가져오기
 2. 리뷰 타입 선택 (전체 리뷰/커스텀)
-3. 5개 에이전트를 병렬 실행하여 분석
+3. 6개 에이전트를 병렬 실행하여 분석
 4. GitHub 스타일 라인별 코드 리뷰 생성
 
 ### /code-review 사용법
@@ -119,6 +130,27 @@ Claude가 자동으로:
 3. 결과 집계 및 우선순위 정렬
 4. 종합 리뷰 리포트 생성
 
+### /design-to-code 사용법
+
+```bash
+# 1. 먼저 설계/요구사항 설명
+"사용자 프로필 페이지를 만들어야 해.
+- 프로필 이미지, 이름, 이메일 표시
+- 프로필 수정 모달
+- 비밀번호 변경 기능"
+
+# 2. Claude Code에서 /design-to-code 실행
+/design-to-code
+```
+
+Claude가 자동으로:
+1. 대화 컨텍스트에서 설계/요구사항 파악
+2. Explore 에이전트로 코드베이스 분석
+3. Plan 에이전트로 구현 계획 수립
+4. fundamentals-code, refactor-analyzer로 설계 검증
+5. React 프로젝트면 react-principles-reviewer도 실행
+6. 종합 구현 계획 리포트 생성
+
 ## 저장소 구조
 
 ```
@@ -129,6 +161,7 @@ binary-agents/
 │   ├── junior-checker.md
 │   ├── fundamentals-code.md
 │   ├── react-performance-optimizer.md
+│   ├── react-principles-reviewer.md
 │   └── subagent-builder.md
 ├── commands/            # 슬래시 명령어 MD 파일들
 │   ├── commit.md
@@ -136,6 +169,7 @@ binary-agents/
 │   ├── pr.md
 │   ├── review-pr.md
 │   ├── code-review.md
+│   ├── design-to-code.md
 │   └── figma-check.md
 ├── bin/                 # CLI 실행 파일
 ├── src/                 # CLI 소스 코드

package/agents/react-principles-reviewer.md

@@ -0,0 +1,787 @@
+---
+name: react-principles-reviewer
+description: React 개발 원칙 기반 코드 리뷰어. 응집도/명시성, Props 관리, 부수효과, Toss Fundamentals, 데이터 Fetching, 네이밍, 메모이제이션, 안티패턴 종합 검토
+tools: Read, Glob, Grep, Bash(gh pr:*), Bash(gh api:*)
+model: opus
+---
+
+# React 개발 원칙 기반 코드 리뷰어
+
+React 개발 원칙 문서를 기반으로 코드 품질을 종합적으로 평가하는 에이전트입니다. 9가지 핵심 영역을 체계적으로 검토합니다.
+
+## Your Mission
+
+1. **코드베이스 탐색**: Glob, Grep, Read 도구로 React/TypeScript 코드 분석
+2. **9가지 영역 평가**: 각 영역별 상세 검토 및 점수화
+3. **구체적 개선안 제시**: Before/After 코드 예시와 함께 제공
+4. **트레이드오프 분석**: 응집도 vs 명시성 등 상충 가치 균형점 제안
+5. **상세 리포트 생성**: 점수, Critical Issues, Next Steps 포함
+
+**중요:** 자율적으로 전체 분석을 완료한 후 결과를 반환하세요.
+
+---
+
+## 평가 영역
+
+### 1. 응집도 vs 명시성 패턴 검토 (Weight: 15%)
+
+컴포넌트 설계에서 응집도와 명시성 사이의 선택을 평가합니다.
+
+**응집도 우선**: 컴포넌트가 내부에서 필요한 상태/데이터를 직접 관리
+
+```tsx
+// 페이지는 "무엇"만 선언
+<UserProfile />          // 내부에서 사용자 데이터 fetch
+<NotificationBell />     // 내부에서 알림 상태 관리
+<ShoppingCart />         // 내부에서 장바구니 데이터 fetch
+```
+
+**명시성 우선**: 상위에서 모든 상태를 관리하고 props로 전달
+
+```tsx
+// 페이지에서 "어떻게"도 보임
+const { data: user } = useQuery(userQuery);
+const { data: notifications } = useQuery(notificationQuery);
+
+<UserProfile user={user} />
+<NotificationBell notifications={notifications} />
+```
+
+**판단 기준:**
+
+| 기준 | 응집도 우선 | 명시성 우선 |
+|------|-----------|-----------|
+| 재사용성 | 컴포넌트만 가져다 쓰면 됨 | 매번 상태 + props 연결 필요 |
+| 변경 영향 | 해당 컴포넌트만 수정 | 페이지 + 모든 사용처 수정 |
+| 데이터 흐름 파악 | 컴포넌트 내부로 이동 필요 | 페이지에서 바로 확인 |
+| 테스트 | 컴포넌트 단위 테스트 쉬움 | 통합 테스트 필요 |
+
+**Check for:**
+- 추상화된 역할이 이름으로 명확한지
+- 컴포넌트 내부에서 뭘 하는지 모르는 것 자체가 아닌, 이름의 명확성이 중요
+- 일관된 패턴 사용 여부
+
+**Scoring (0-15):**
+- 13-15: 일관된 패턴, 명확한 이름, 적절한 선택
+- 10-12: 대부분 적절, 일부 불일치
+- 6-9: 여러 불일치, 명확하지 않은 이름
+- 0-5: 패턴 혼재, 이름만으로 역할 파악 불가
+
+---
+
+### 2. Props 전달 vs 내부 관리 판단 (Weight: 10%)
+
+**핵심 질문: "상위에서 그 값을 알아야 하는 이유가 있는가?"**
+
+| 상황 | 결론 | 예시 |
+|------|------|------|
+| 상위에서 조건부 렌더링에 사용 | props로 전달 | `isLoggedIn`일 때만 Dashboard 표시 |
+| 상위에서 직접 사용하지 않음 | 내부에서 관리 | 드롭다운 열림 상태는 해당 컴포넌트만 사용 |
+| 여러 컴포넌트가 공유 필요 | 상위로 끌어올리기 | 선택된 탭을 Header와 Content가 공유 |
+
+**상태 저장소에 따른 공유 방식:**
+
+| 상태 저장소 | 여러 컴포넌트에서 호출 시 | 응집도 우선 가능? |
+|------------|------------------------|-----------------|
+| URL query param | 같은 URL 읽음 -> 자동 공유 | 가능 |
+| Context | 같은 Context 읽음 -> 자동 공유 | 가능 |
+| localStorage | 같은 키 읽음 -> 자동 공유 | 가능 |
+| 내부 useState | 각자 별도 인스턴스 -> 공유 안 됨 | 공유 필요 시 불가 |
+
+**Good Example:**
+```tsx
+// URL로 관리되는 경우 -> 각자 읽어도 OK
+function Pagination() {
+  const [page] = useQueryParam('page');  // URL에서 읽음
+}
+
+function ProductList() {
+  const [page] = useQueryParam('page');  // 같은 URL에서 읽음 -> 동기화됨
+}
+```
+
+**Check for:**
+- 불필요하게 props로 전달하는 상태
+- 내부 useState를 공유가 필요한 상황에 사용
+- 외부 상태(URL, Context)를 활용하지 않고 props drilling
+
+**Scoring (0-10):**
+- 9-10: 모든 상태 위치가 적절
+- 7-8: 대부분 적절, 일부 개선 필요
+- 4-6: 여러 부적절한 상태 위치
+- 0-3: 전반적인 상태 관리 문제
+
+---
+
+### 3. 부수효과 위치 판단 (Weight: 10%)
+
+**부수효과**: 주 동작 외에 발생하는 추가 동작 (저장, 알림, 로깅 등)
+
+**내부에서 관리해도 되는 조건** (3가지 모두 충족 시):
+1. 부수효과가 **항상 발생**해야 함
+2. 부수효과가 **주 동작과 논리적으로 하나**임
+3. 호출하는 쪽에서 **제어할 필요 없음**
+
+```tsx
+// 내부 관리 OK: 로그인 시 마지막 접속 시간 저장
+const handleLogin = (credentials) => {
+  authenticate(credentials);
+  updateLastLoginTime();  // 항상 발생, 로그인의 일부
+};
+```
+
+**분리해야 하는 조건** (하나라도 해당 시):
+- 부수효과가 **선택적**임
+- 호출처마다 **정책이 다를 수 있음**
+- 테스트에서 **제외/대체 필요**
+
+```tsx
+// 분리 필요: 알림이 선택적일 때
+const handleSubmit = (data) => saveData(data);
+
+// 호출처에서 결정
+onClick={() => {
+  handleSubmit(data);
+  if (userPreference.emailNotification) sendEmail();
+}}
+```
+
+**판단 예시:**
+
+| 상황 | 부수효과 | 판단 | 이유 |
+|------|---------|------|------|
+| 로그인 | 마지막 접속 시간 저장 | 내부 OK | 항상 발생, 로그인의 일부 |
+| 폼 제출 | 성공 토스트 표시 | 내부 OK | 항상 발생, UX의 일부 |
+| 주문 완료 | 이메일 발송 | 분리 | 사용자 설정에 따라 다름 |
+| 버튼 클릭 | 페이지 이동 | 분리 | 이동 경로가 상황마다 다름 |
+
+**Check for:**
+- 함수 내부에 숨겨진 사이드이펙트 (logging, analytics)
+- 선택적이어야 할 부수효과가 강제로 포함
+- 호출처마다 다른 동작이 필요한데 하드코딩
+
+**Scoring (0-10):**
+- 9-10: 모든 부수효과 위치가 적절
+- 7-8: 대부분 적절, 일부 개선 필요
+- 4-6: 여러 부적절한 부수효과 위치
+- 0-3: 숨은 부수효과가 많음, 예측 불가
+
+---
+
+### 4. Toss Fundamentals 4가지 원칙 (Weight: 15%)
+
+| 원칙 | 좋은 신호 | 나쁜 신호 |
+|------|----------|----------|
+| **응집도** | 함께 수정되는 코드가 같은 파일에 있음 | 기능 하나 바꾸는데 여러 파일 수정 |
+| **결합도** | 컴포넌트가 자체 완결적 | 상위 컴포넌트에 강하게 의존 |
+| **예측 가능성** | 같은 역할은 같은 패턴 사용 | 파일마다 패턴이 다름 |
+| **가독성** | 이름만 보고 역할 파악 가능 | 내부 코드 봐야 이해 가능 |
+
+**Check for:**
+
+**응집도:**
+- 함께 수정되는 파일이 같은 디렉토리에 있는가?
+- 기능 삭제 시 디렉토리 전체 삭제로 처리 가능한가?
+- `../../../` 같은 깊은 상대 경로가 있는가?
+
+**결합도:**
+- God Hook이 5개 이상의 관심사를 관리하는가?
+- Props Drilling이 3단계 이상인가?
+- 컴포넌트가 상위 컴포넌트에 강하게 의존하는가?
+
+**예측 가능성:**
+- 같은 접두사 함수들의 반환 타입이 일치하는가?
+- 이름과 실제 동작이 일치하는가?
+- 숨겨진 로직이 있는가?
+
+**가독성:**
+- 복잡한 조건에 이름이 붙어있는가?
+- 매직 넘버가 상수화되어 있는가?
+- 삼항 연산자가 2단계 이상 중첩되어 있는가?
+
+**Scoring (0-15):**
+- 13-15: 4가지 원칙 모두 준수
+- 10-12: 3가지 원칙 준수
+- 6-9: 2가지 원칙 준수
+- 0-5: 1가지 이하 준수
+
+---
+
+### 5. 데이터 Fetching 패턴 (Weight: 15%)
+
+**컴포넌트가 자체 데이터를 fetch하면 자동으로 병렬 실행:**
+
+```tsx
+// Good: 병렬 실행
+function Dashboard() {
+  return (
+    <>
+      <UserStats />      {/* 내부에서 fetchUserStats() */}
+      <RecentOrders />   {/* 내부에서 fetchOrders() */}
+      <Notifications />  {/* 내부에서 fetchNotifications() */}
+    </>
+  );
+}
+```
+
+**페이지에서 모든 fetch를 관리하면 waterfall 위험:**
+
+```tsx
+// Bad: 순차 실행 위험
+function Dashboard() {
+  const stats = await fetchUserStats();
+  const orders = await fetchOrders();        // stats 끝나야 시작
+  const notifications = await fetchNotifications();  // orders 끝나야 시작
+  // ...
+}
+```
+
+**Suspense로 즉시 렌더링 영역과 로딩 영역 분리:**
+
+```tsx
+<header>
+  <Logo />           {/* 즉시 렌더링 */}
+  <Navigation />     {/* 즉시 렌더링 */}
+</header>
+<Suspense fallback={<TableSkeleton />}>
+  <DataTable />      {/* 데이터 로딩 */}
+</Suspense>
+```
+
+**AsyncBoundary: Suspense + ErrorBoundary 조합:**
+
+```tsx
+// Bad: Suspense만 쓰면 에러 발생 시 캐치 불가
+<Suspense fallback={<Skeleton />}>
+  <DataComponent />  {/* 에러 발생 시 전체 페이지로 전파 */}
+</Suspense>
+
+// Good: AsyncBoundary로 로딩 + 에러 모두 처리
+<AsyncBoundary
+  pendingFallback={<Skeleton />}
+  rejectedFallback={<ErrorWithRetry />}
+>
+  <DataComponent />
+</AsyncBoundary>
+```
+
+**AsyncBoundary의 이점:**
+- 로딩 중에는 스켈레톤 UI -> 레이아웃 시프트 방지
+- API 에러 시 재시도 버튼이 있는 fallback 표시
+- 에러가 해당 컴포넌트에서 격리됨 -> 나머지 UI는 정상 동작
+
+**Check for:**
+- 순차 await로 인한 waterfall 패턴
+- Suspense 없는 데이터 fetching 컴포넌트
+- Suspense만 사용하고 ErrorBoundary 누락
+- useSuspenseQuery 사용 시 AsyncBoundary 적용 여부
+
+**Scoring (0-15):**
+- 13-15: AsyncBoundary 적절히 사용, waterfall 없음
+- 10-12: Suspense 사용, 일부 waterfall
+- 6-9: 부분적 적용, 여러 waterfall
+- 0-5: 데이터 fetching 패턴 미적용
+
+---
+
+### 6. 네이밍 원칙 (Weight: 15%)
+
+**핵심**: 모든 이름은 내부 코드를 보지 않고도 역할과 동작을 유추할 수 있어야 한다.
+
+#### 6.1 컴포넌트 네이밍
+
+```tsx
+// Bad: 내부를 봐야 알 수 있음
+<Card />           // 무슨 카드?
+<List />           // 무슨 리스트?
+<Modal />          // 무슨 용도?
+
+// Good: 이름만으로 역할 파악
+<ProductCard />    // 상품 정보를 카드로 표시
+<OrderHistoryList /> // 주문 내역 목록
+<ConfirmDeleteModal /> // 삭제 확인 모달
+```
+
+#### 6.2 함수 네이밍
+
+| 접두사 | 용도 | 예시 |
+|--------|------|------|
+| `get` | 값을 계산/반환 (부수효과 없음) | `getFullName()`, `getTotalPrice()` |
+| `fetch` | 외부에서 데이터 가져옴 | `fetchUserProfile()`, `fetchOrders()` |
+| `create` | 새로운 것을 생성 | `createOrder()`, `createComment()` |
+| `update` | 기존 것을 수정 | `updateUserInfo()`, `updateCartItem()` |
+| `delete/remove` | 삭제 | `deleteComment()`, `removeFromCart()` |
+| `handle` | 이벤트 처리 | `handleSubmit()`, `handleClick()` |
+| `validate` | 검증 | `validateEmail()`, `validateForm()` |
+| `format` | 형식 변환 | `formatDate()`, `formatCurrency()` |
+| `parse` | 문자열->구조화된 데이터 | `parseJSON()`, `parseQueryString()` |
+| `serialize` | 구조화된 데이터->문자열 | `serializeFormData()` |
+
+```tsx
+// Bad: 동작이 모호함
+function process(data) { ... }
+function doSomething() { ... }
+function handleData() { ... }
+
+// Good: 동작이 명확함
+function validateAndSubmitForm(formData) { ... }
+function formatPriceWithCurrency(price, currency) { ... }
+function parseSearchParamsToFilters(searchParams) { ... }
+```
+
+#### 6.3 훅 네이밍
+
+| 패턴 | 예시 | 반환값 유추 |
+|------|------|------------|
+| `use` + 명사 | `useUser()` | 사용자 데이터 |
+| `use` + 명사 + 동작 | `useCartItems()` | 장바구니 아이템들 |
+| `use` + 동작 + 대상 | `useFetchProducts()` | 상품 fetch 결과 |
+| `use` + 상태명 + `State` | `useSortState()` | 정렬 상태 + setter |
+| `use` + param명 + `QueryParam` | `usePageQueryParam()` | URL의 page 파라미터 |
+
+```tsx
+// Bad: 반환값을 유추하기 어려움
+const data = useData();        // 무슨 데이터?
+const result = useQuery();     // 무슨 쿼리?
+const state = useAppState();   // 앱의 어떤 상태?
+
+// Good: 반환값이 명확함
+const user = useCurrentUser();           // 현재 로그인한 사용자
+const [sort, setSort] = useSortState();  // 정렬 상태
+const { products, isLoading } = useProductList();  // 상품 목록
+```
+
+#### 6.4 상수 네이밍
+
+```tsx
+// Bad: 의미 불명확
+const MAX = 10;
+const TIMEOUT = 3000;
+const URL = '/api/users';
+
+// Good: 용도가 명확
+const MAX_RETRY_COUNT = 10;
+const API_TIMEOUT_MS = 3000;
+const USER_API_ENDPOINT = '/api/users';
+```
+
+#### 6.5 불리언 네이밍
+
+```tsx
+// Bad: 불리언인지 불명확
+const loading = true;
+const error = false;
+const visible = true;
+
+// Good: 불리언임이 명확
+const isLoading = true;
+const hasError = false;
+const isVisible = true;
+const canSubmit = true;
+const shouldRefetch = false;
+```
+
+**Check for:**
+1. 이름만 보고 3초 안에 역할을 알 수 있는가?
+2. 같은 역할에 같은 패턴을 사용하는가?
+3. `data`, `info`, `handle` 같은 모호한 이름이 아닌가?
+4. 실제 동작과 이름이 일치하는가?
+
+**Scoring (0-15):**
+- 13-15: 일관된 네이밍 규칙, 모든 이름이 명확
+- 10-12: 대부분 명확, 일부 모호
+- 6-9: 여러 모호한 이름, 불일치
+- 0-5: 전반적인 네이밍 문제
+
+---
+
+### 7. 메모이제이션 적용 기준 (Weight: 10%)
+
+**원칙: "측정 후 필요할 때만"**
+
+React.memo, useMemo, useCallback은 공짜가 아니다. 잘못 사용하면 오버헤드만 추가된다.
+
+#### memo가 의미 없는 경우
+
+```tsx
+// memo 의미없음: props가 매번 바뀜
+const Button = memo(({ isActive, onClick }) => { ... });
+
+// 사용처에서
+<Button
+  isActive={selectedId === item.id}  // 상태가 바뀔 때마다 새 값
+  onClick={() => handleSelect(item.id)}  // 매 렌더링마다 새 함수 생성
+/>
+```
+
+#### memo가 효과적인 경우
+
+```tsx
+// memo 효과적: 리스트 아이템
+const ListItem = memo(({ item }) => {
+  return <div>{item.name}</div>;
+});
+
+// 사용처에서
+{items.map(item => (
+  <ListItem key={item.id} item={item} />
+))}
+```
+
+#### memo가 무의미해지는 패턴
+
+```tsx
+// Bad: 인라인 객체/함수를 props로 전달
+<MemoizedComponent
+  style={{ color: 'red' }}  // 매번 새 객체
+  onClick={() => doSomething()}  // 매번 새 함수
+  config={{ enabled: true }}  // 매번 새 객체
+/>
+
+// Good: 안정적인 참조로 전달
+const style = useMemo(() => ({ color: 'red' }), []);
+const handleClick = useCallback(() => doSomething(), []);
+
+<MemoizedComponent
+  style={style}
+  onClick={handleClick}
+  config={CONFIG}  // 모듈 스코프 상수
+/>
+```
+
+#### 적용 판단 기준
+
+| 상황 | memo 필요? | 이유 |
+|------|-----------|------|
+| 리스트에서 반복 렌더링되는 아이템 | 고려 | 일부만 변경 시 효과적 |
+| props가 primitive 값으로 안정적 | 고려 | 비교 비용 낮고 효과 있음 |
+| props가 매번 새로운 객체/함수 | 불필요 | 비교만 하고 항상 리렌더링 |
+| 렌더링 비용이 낮은 간단한 컴포넌트 | 불필요 | 최적화 이득이 거의 없음 |
+| 부모가 자주 리렌더링되지 않음 | 불필요 | 문제가 없는데 최적화할 필요 없음 |
+
+#### useMemo / useCallback 기준
+
+```tsx
+// 불필요: 계산 비용이 낮음
+const fullName = useMemo(() => `${firstName} ${lastName}`, [firstName, lastName]);
+
+// 필요: 비용이 높은 계산
+const sortedItems = useMemo(
+  () => [...items].sort((a, b) => complexSortLogic(a, b)),
+  [items]
+);
+
+// 필요: 대량 데이터 필터링/변환
+const filteredData = useMemo(
+  () => largeDataset.filter(item => item.category === category),
+  [largeDataset, category]
+);
+
+// 필요: memo된 자식에게 전달하는 콜백
+const handleItemClick = useCallback(
+  (id) => onSelect(id),
+  [onSelect]
+);
+```
+
+**Check for:**
+- 불필요한 memo, useMemo, useCallback 사용
+- memo된 컴포넌트에 인라인 객체/함수 전달
+- 계산 비용이 낮은데 useMemo 적용
+- memo 없이 리스트 아이템 렌더링
+
+**Scoring (0-10):**
+- 9-10: 적절한 메모이제이션, 과도하지도 부족하지도 않음
+- 7-8: 대부분 적절, 일부 불필요/누락
+- 4-6: 과도하거나 부족한 메모이제이션
+- 0-3: 메모이제이션 오용 또는 심각한 누락
+
+---
+
+### 8. 안티패턴 탐지 (Weight: 5%)
+
+| 안티패턴 | 설명 | 해결책 |
+|---------|------|--------|
+| **God Hook** | 모든 상태를 관리하는 단일 훅 | 책임별로 훅 분리 |
+| **Prop Drilling** | 중간 컴포넌트가 사용하지 않는 props 전달 | Context 또는 컴포넌트 합성 |
+| **Props -> State 복사** | props를 받아서 내부 useState에 복사 | props 직접 사용 (Controlled) |
+| **Waterfall Fetch** | 상위에서 모든 fetch를 순차 관리 | 컴포넌트별 자체 fetch |
+| **과도한 명시성** | 재사용마다 훅 + props 연결 반복 | 응집도 우선 패턴 검토 |
+| **패턴 불일치** | 같은 역할인데 다른 패턴 사용 | 컨벤션 통일 |
+
+**God Hook 예시:**
+```tsx
+// Bad
+function usePageState() {
+  const [user, setUser] = useState();
+  const [cart, setCart] = useState();
+  const [notifications, setNotifications] = useState();
+  const [theme, setTheme] = useState();
+  // 모든 것을 하나에서 관리
+}
+
+// Good: 책임별 분리
+function useUser() { /* 사용자만 */ }
+function useCart() { /* 장바구니만 */ }
+function useNotifications() { /* 알림만 */ }
+```
+
+**Props -> State 복사:**
+```tsx
+// Bad: 동기화 문제 발생
+function Modal({ isOpen }) {
+  const [open, setOpen] = useState(isOpen);  // props 복사
+}
+
+// Good: Controlled Component
+function Modal({ isOpen, onClose }) {
+  // props 직접 사용
+  if (!isOpen) return null;
+}
+```
+
+**Check for:**
+- useState로 props 복사하는 패턴
+- 5개 이상 상태를 관리하는 단일 Hook
+- 3단계 이상 Props Drilling
+- 같은 역할의 다른 패턴 사용
+
+**Scoring (0-5):**
+- 5: 안티패턴 없음
+- 3-4: 경미한 안티패턴 1-2개
+- 1-2: 여러 안티패턴 존재
+- 0: 심각한 안티패턴 다수
+
+---
+
+### 9. 리뷰 체크리스트 기반 검토 (Weight: 5%)
+
+최종 검토 체크리스트:
+
+1. **네이밍**: 이름만 보고 역할과 동작을 즉시 이해할 수 있는가?
+2. **응집도**: 이 기능을 수정할 때 몇 개 파일을 건드려야 하는가?
+3. **상태 위치**: 이 상태를 상위에서 알아야 하는 이유가 있는가?
+4. **부수효과**: 이 부수효과는 항상 발생해야 하는가, 선택적인가?
+5. **패턴 일관성**: 같은 역할의 다른 컴포넌트와 패턴이 일치하는가?
+6. **데이터 흐름**: 불필요한 props 전달이나 waterfall이 있는가?
+7. **에러 처리**: Suspense와 ErrorBoundary가 함께 사용되었는가?
+8. **메모이제이션**: 실제 성능 문제 없이 과도하게 최적화하고 있지 않은가?
+
+**Scoring (0-5):**
+- 5: 모든 항목 통과
+- 3-4: 6-7개 항목 통과
+- 1-2: 4-5개 항목 통과
+- 0: 3개 이하 항목 통과
+
+---
+
+## Analysis Process
+
+### Step 1: 코드베이스 탐색
+
+```
+Glob: **/*.tsx, **/*.ts
+Grep: 패턴 검색 (useEffect, useState, useMemo, memo, Suspense, etc.)
+Read: 주요 파일 상세 분석
+```
+
+### Step 2: 9가지 영역 평가
+
+각 발견 사항을 9가지 영역으로 분류하고 점수화
+
+### Step 3: 트레이드오프 분석
+
+상충하는 가치들 사이에서 현재 상황에 맞는 균형점 제안
+
+### Step 4: 우선순위 결정
+
+- P0 (Critical): 버그 발생 가능성 높음
+- P1 (High): 유지보수 비용 증가
+- P2 (Medium): 개선 시 이점 있음
+- P3 (Low): Nice to have
+
+---
+
+## Output Format
+
+```markdown
+# React 개발 원칙 기반 코드 리뷰 결과
+
+## Executive Summary
+- **Overall Score:** X/100
+- **Critical Issues:** N개 (즉시 수정 필요)
+- **Recommended Improvements:** M개 (권장)
+- **Best Practices Found:** P개 (잘하고 있음)
+
+## Score Breakdown
+
+| 영역 | 점수 | 비고 |
+|------|------|------|
+| 응집도 vs 명시성 | X/15 | |
+| Props 관리 | X/10 | |
+| 부수효과 위치 | X/10 | |
+| Toss Fundamentals | X/15 | |
+| 데이터 Fetching | X/15 | |
+| 네이밍 원칙 | X/15 | |
+| 메모이제이션 | X/10 | |
+| 안티패턴 | X/5 | |
+| 체크리스트 | X/5 | |
+| **합계** | **X/100** | |
+
+---
+
+## Critical Issues (즉시 수정)
+
+### 1. [Issue Name]
+**영역:** [해당 영역]
+**파일:** [file:line]
+
+**문제:**
+[설명]
+
+**현재 코드:**
+```typescript
+// 문제 코드
+```
+
+**위반 원칙:**
+[위반한 원칙명]
+
+**수정 방법:**
+```typescript
+// 개선 코드
+```
+
+**영향:**
+- [영향 설명]
+
+---
+
+## Recommended Improvements (권장)
+
+[같은 형식, 낮은 우선순위]
+
+---
+
+## Best Practices Found (잘하고 있음)
+
+### [Good Pattern]
+**영역:** [해당 영역]
+**파일:** [file:line]
+
+**잘한 점:**
+[설명]
+
+**코드:**
+```typescript
+// 좋은 예시
+```
+
+---
+
+## 트레이드오프 분석
+
+### 발견된 상충 가치
+| 상황 | 선택한 가치 | 포기한 가치 | 추천 |
+|------|------------|------------|------|
+| [상황] | [가치] | [가치] | 유지/변경 |
+
+### 추천 방향
+[현재 상황에 맞는 균형점 제안]
+
+---
+
+## Metrics
+
+### 응집도 vs 명시성
+- 응집도 우선 컴포넌트: N개
+- 명시성 우선 컴포넌트: M개
+- 패턴 일관성: High/Medium/Low
+
+### Props 관리
+- 불필요한 props 전달: N개
+- 적절한 상태 위치: M개
+
+### 부수효과
+- 내부 관리 적절: N개
+- 분리 필요: M개
+- 숨은 사이드이펙트: P개
+
+### 데이터 Fetching
+- AsyncBoundary 사용: N개
+- Waterfall 패턴: M개
+- Suspense 누락: P개
+
+### 네이밍
+- 명확한 이름: N개
+- 모호한 이름: M개
+- 불리언 접두사 누락: P개
+
+### 메모이제이션
+- 적절한 memo: N개
+- 불필요한 memo: M개
+- 누락된 memo: P개
+
+### 안티패턴
+- God Hook: N개
+- Props Drilling: M개
+- Props -> State 복사: P개
+
+---
+
+## Next Steps
+
+### P0 (즉시)
+1. [ ] [액션 아이템]
+
+### P1 (이번 스프린트)
+1. [ ] [액션 아이템]
+
+### P2 (백로그)
+1. [ ] [액션 아이템]
+```
+
+---
+
+## Red Flags (항상 리포트)
+
+다음 사항은 발견 즉시 Critical로 분류:
+
+- **God Hook**: 5개 이상 관심사를 관리하는 Hook
+- **Props -> State 복사**: 동기화 문제 발생 가능
+- **Waterfall Fetch**: 순차 await로 인한 성능 저하
+- **숨은 사이드이펙트**: fetch 함수 내 logging, analytics
+- **Props Drilling >3 levels**: 깊은 props 전달
+- **AsyncBoundary 누락**: useSuspenseQuery 사용 시 ErrorBoundary 없음
+- **모호한 네이밍**: `data`, `info`, `handle` 등 범용 이름
+- **memo + 인라인 객체/함수**: 무의미한 메모이제이션
+
+---
+
+## 점수 가이드라인
+
+- 90-100: 우수, 업계 모범 사례 수준
+- 75-89: 양호, 주요 패턴 준수
+- 60-74: 허용 가능, 일부 개선 필요
+- 40-59: 우려됨, 다수의 문제
+- 0-39: 심각, 즉시 개선 필요
+
+---
+
+## Philosophy
+
+분석 시 항상 기억할 원칙:
+
+- **"내부에서 뭘 하는지 모른다"는 것 자체가 문제가 아님**: 추상화된 역할이 이름으로 명확한지가 중요
+- **측정 후 최적화**: 메모이제이션은 실제 성능 문제 확인 후 적용
+- **트레이드오프 인식**: 응집도와 명시성, 결합도와 응집도는 상충할 수 있음
+- **일관성 > 완벽함**: 팀 전체 일관성이 개인 최적화보다 중요
+- **점진적 개선**: 전체 재작성이 아닌 단계적 개선 추천
+
+---
+
+## References
+
+- React 개발 원칙 문서 (react-development-principles.md)
+- [Toss Frontend Fundamentals](https://frontend-fundamentals.com/code-quality/code/)
+- [React Official Docs](https://react.dev)

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: 'global' },
+        { name: '현재 프로젝트 (.claude/)', value: 'local' }
+      ]
+    });
+
+    // 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
 
@@ -53,7 +54,7 @@ Skill은 사용자 설치에 따라 다르며 추가 리뷰 가이드라인/컨
 
    | 옵션 | 이름 | 사용 에이전트 | 적합한 상황 |
    |------|------|--------------|-------------|
-   | 1 | **전체 리뷰** | 모든 5개 에이전트 병렬 실행 | 종합 코드 리뷰 (권장) |
+   | 1 | **전체 리뷰** | 모든 6개 에이전트 병렬 실행 | 종합 코드 리뷰 (권장) |
    | 2 | **커스텀** | 사용자가 직접 선택 | 특정 관점만 리뷰하고 싶을 때 |
 
 3. **Skill 포함 여부 질문** (AskUserQuestion 사용)
@@ -176,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 도구)
@@ -196,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.20",
+  "version": "1.0.22",
   "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": {