@elyun/bylane 1.5.0 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CLAUDE.md CHANGED
@@ -10,34 +10,43 @@ byLane — Claude Code용 프론트엔드 개발 자동화 하네스.
10
10
  ## 커맨드
11
11
 
12
12
  ```bash
13
- # 의존성 설치
14
- npm install
15
-
16
- # 전체 테스트 실행
17
- npm test
18
-
19
- # 모니터 대시보드 실행
20
- npm run monitor
13
+ npm install # 의존성 설치 + pre-commit 훅 자동 등록 (prepare 스크립트)
14
+ npm test # 테스트 실행 (19개)
15
+ npm run monitor # 모니터 대시보드
16
+ npm version minor # 마이너 버전 올리기 (커밋 + 태그 자동 생성)
17
+ npm run release # npm 배포 (커밋/푸시 완료 후 실행)
21
18
 
22
19
  # 테스트용 더미 상태 생성
23
20
  node -e "import('./src/state.js').then(({writeState})=>writeState('code-agent',{status:'in_progress',progress:50,retries:0,startedAt:new Date().toISOString(),log:[]}))"
21
+
22
+ # 에이전트별 모델 확인
23
+ node -e "import('./src/config.js').then(({loadConfig,getAgentModel})=>{const c=loadConfig();['orchestrator','code-agent','review-agent'].forEach(a=>console.log(a,getAgentModel(c,a)))})"
24
24
  ```
25
25
 
26
26
  ## 아키텍처
27
27
 
28
28
  - `src/state.js` — `.bylane/state/*.json` 읽기/쓰기 유틸 (writeState, readState, clearState, listStates, appendLog)
29
- - `src/config.js` — `.bylane/bylane.json` 로드/저장/검증 (loadConfig, saveConfig, validateConfig, DEFAULT_CONFIG)
29
+ - `src/config.js` — `.bylane/bylane.json` 로드/저장/검증 (loadConfig, saveConfig, validateConfig, getAgentModel, DEFAULT_CONFIG)
30
30
  - `src/branch.js` — 브랜치명 패턴 엔진 (buildBranchName, buildBranchNameFromConfig)
31
- - `src/monitor/`blessed 기반 TUI 대시보드 (2열 그리드, 1초 폴링)
31
+ - `src/cli.js`npx 설치 CLI (install, --symlink 옵션, 기존 파일 .bak 백업)
32
+ - `src/review-loop.js` — 5분 주기 review 요청 PR 폴러 → `.bylane/state/review-queue.json`
33
+ - `src/respond-loop.js` — 5분 주기 내 PR 리뷰/코멘트 폴러 → `.bylane/state/respond-queue.json`
34
+ - `src/monitor/` — blessed 기반 TUI 대시보드 (2열 그리드, 1초 폴링, fullUnicode)
32
35
  - `skills/` — Claude Code 에이전트 skill 파일들
33
36
  - `hooks/` — 외부 이벤트 자동 감지 훅
34
37
  - `commands/` — `/bylane` 슬래시 커맨드 정의
38
+ - `templates/review-template.md` — 리뷰 코멘트 기본 템플릿
39
+ - `scripts/release.sh` — npm 배포 스크립트 (dirty 체크 + 테스트 + publish)
40
+ - `.githooks/pre-commit` — 보안 검사 훅 (시크릿/민감파일/console.log)
35
41
 
36
42
  ## 에이전트 파이프라인
37
43
 
38
44
  ```
39
45
  orchestrator → issue-agent → code-agent → test-agent → commit-agent
40
46
  → pr-agent → review-agent → respond-agent → notify-agent
47
+
48
+ review-loop (독립: 5분 주기 review 요청 감지)
49
+ respond-loop (독립: 5분 주기 리뷰 코멘트 감지)
41
50
  ```
42
51
 
43
52
  각 에이전트는 `.bylane/state/{name}.json`에 상태 기록. 모니터가 1초마다 폴링.
@@ -55,13 +64,20 @@ orchestrator → issue-agent → code-agent → test-agent → commit-agent
55
64
  }
56
65
  ```
57
66
 
67
+ ## GitHub 접근 방법
68
+
69
+ `github.method`: `"auto"` (기본, MCP→CLI→API 순) | `"mcp"` | `"cli"` | `"api"`
70
+
71
+ ## 에이전트 모델 설정
72
+
73
+ `config.models` 객체에서 에이전트별 모델 지정. `getAgentModel(config, agentName)`으로 조회.
74
+ 기본값: orchestrator/issue-agent/respond-agent → opus-4-6, code-agent/review-agent → sonnet-4-6, 나머지 → haiku-4-5.
75
+
58
76
  ## 브랜치 네이밍 토큰
59
77
 
60
78
  `{tracker}`, `{type}`, `{issue-number}`, `{custom-id}`, `{title-slug}`, `{date}`, `{username}`
61
79
 
62
- 빈 토큰은 자동으로 제외됨:
63
- - `{tracker}-{issue-number}-{custom-id}` + custom-id 없음 → `issues-32`
64
- - `{tracker}-{issue-number}-{custom-id}` + custom-id=C-12 → `issues-32-C-12`
80
+ 빈 토큰은 자동 제외: `{type}/{issue-number}` + type 없음 → `32-add-dark-mode`
65
81
 
66
82
  ## 테스트 구조
67
83
 
@@ -69,5 +85,12 @@ orchestrator → issue-agent → code-agent → test-agent → commit-agent
69
85
  tests/
70
86
  ├── state.test.js — writeState, readState, clearState, listStates, appendLog
71
87
  ├── config.test.js — loadConfig, saveConfig, validateConfig, DEFAULT_CONFIG
72
- └── branch.test.js — buildBranchName (5개 패턴 케이스)
88
+ └── branch.test.js — buildBranchName (6개 패턴 케이스, 슬래시 엣지케이스 포함)
73
89
  ```
90
+
91
+ ## 주의사항
92
+
93
+ - `.bylane/state/`는 .gitignore로 제외됨 (런타임 상태)
94
+ - `.bylane/bylane.json`은 추적됨 (프로젝트 설정)
95
+ - `docs/`는 .gitignore로 제외됨 (내부 설계 문서)
96
+ - pre-commit 훅: `npm install` 시 자동 등록 (`prepare` 스크립트)
package/README.md CHANGED
@@ -6,18 +6,25 @@ GitHub Issues에서 시작해 코드 구현, 테스트, 커밋, PR 생성, 리
6
6
 
7
7
  ## 특징
8
8
 
9
+ - **프로젝트 분석** — 코드 스타일·디자인 토큰·아키텍처를 자동 분석해 `.claude/instructions/`에 저장, CLAUDE.md에 자동 import
9
10
  - **전체 워크플로우 자동화** — `/bylane 다크모드 토글 추가해줘` 한 줄로 이슈 생성부터 PR까지
10
11
  - **개별 실행 가능** — 각 에이전트를 단독으로 실행 가능
11
12
  - **실시간 모니터링** — 2열 그리드 터미널 TUI 대시보드
13
+ - **자동 리뷰 루프** — 5분 주기로 review 요청 PR 자동 리뷰
14
+ - **자동 대응 루프** — 5분 주기로 내 PR 리뷰/코멘트 자동 대응 (accept/rebut)
12
15
  - **피드백 루프** — 테스트 실패 시 자동 재시도 (설정 가능)
16
+ - **GitHub 접근 방법** — MCP / CLI(`gh`) / REST API 자동 감지
17
+ - **리뷰 템플릿** — 코드 예시, 모델 명시, 커스텀 푸터 설정 가능
18
+ - **에이전트별 모델 설정** — 에이전트마다 다른 AI 모델 지정 가능
13
19
  - **Figma MCP 연동** — 이슈의 Figma 링크에서 스펙 자동 추출 (선택적)
14
20
  - **Slack / Telegram 알림** — 완료 또는 개입 필요 시 알림
21
+ - **pre-commit 보안 훅** — 시크릿/민감 파일/console.log 자동 검사
15
22
 
16
23
  ## 요구사항
17
24
 
18
25
  - [Claude Code](https://claude.ai/code) CLI
19
26
  - Node.js 20+
20
- - GitHub MCP (Claude Code 기본 제공)
27
+ - GitHub MCP (Claude Code 기본 제공), `gh` CLI, 또는 `GITHUB_TOKEN` 중 하나
21
28
  - Slack MCP / Telegram (알림 사용 시)
22
29
  - Figma MCP (디자인 연동 사용 시)
23
30
 
@@ -26,15 +33,16 @@ GitHub Issues에서 시작해 코드 구현, 테스트, 커밋, PR 생성, 리
26
33
  ### npx로 설치 (권장)
27
34
 
28
35
  ```bash
29
- npx bylane
36
+ npx @elyun/bylane
30
37
  ```
31
38
 
32
39
  Skills, Commands, Hooks 파일을 `~/.claude/` 하위 디렉토리에 자동으로 복사합니다.
40
+ 기존 파일이 있으면 `.bak`으로 백업 후 교체합니다.
33
41
 
34
42
  심볼릭 링크로 설치하면 레포 업데이트 시 자동으로 반영됩니다:
35
43
 
36
44
  ```bash
37
- npx bylane --symlink
45
+ npx @elyun/bylane --symlink
38
46
  ```
39
47
 
40
48
  ### 수동 설치
@@ -42,7 +50,7 @@ npx bylane --symlink
42
50
  ```bash
43
51
  git clone https://github.com/el-yun/byLane.git
44
52
  cd byLane
45
- npm install
53
+ npm install # pre-commit 보안 훅 자동 등록
46
54
  node src/cli.js install
47
55
  ```
48
56
 
@@ -54,13 +62,15 @@ Claude Code를 열고 프로젝트 디렉토리에서:
54
62
  /bylane setup
55
63
  ```
56
64
 
57
- 6단계 인터랙티브 설정:
58
- 1. 이슈 트래커 (GitHub Issues / Linear / 둘 다)
59
- 2. 알림 채널 (Slack / Telegram / 둘 다)
60
- 3. 모드 설정
61
- 4. 권한 범위 (read-only / write / full)
62
- 5. 고급 설정 (재시도 횟수, 타임아웃, Figma MCP)
63
- 6. 브랜치 네이밍 패턴
65
+ 7단계 인터랙티브 설정:
66
+ 1. GitHub 접근 방법 (MCP / CLI / API / auto)
67
+ 2. 이슈 트래커 (GitHub Issues / Linear / 둘 다)
68
+ 3. 알림 채널 (Slack / Telegram / 둘 다)
69
+ 4. 모드 설정
70
+ 5. 권한 범위 (read-only / write / full)
71
+ 6. 고급 설정 (재시도 횟수, 타임아웃, Figma MCP)
72
+ 7. 브랜치 네이밍 패턴
73
+ 8. 에이전트별 AI 모델
64
74
 
65
75
  ## 사용법
66
76
 
@@ -78,17 +88,29 @@ Claude Code를 열고 프로젝트 디렉토리에서:
78
88
  ### 개별 에이전트 실행
79
89
 
80
90
  ```
91
+ /bylane analyze 프로젝트 분석 → .claude/instructions/ 생성
81
92
  /bylane issue [#번호 | 텍스트] 이슈 생성/분석
82
93
  /bylane code [#번호] 코드 구현
83
94
  /bylane test 테스트 실행
84
95
  /bylane commit 커밋 생성
85
96
  /bylane pr PR 생성
86
97
  /bylane review [PR번호] PR 리뷰
98
+ /bylane review-loop 5분 주기 자동 리뷰 루프
87
99
  /bylane respond [PR번호] 리뷰 반박/반영
100
+ /bylane respond-loop 5분 주기 자동 대응 루프
88
101
  /bylane notify 알림 발송
89
102
  /bylane status 현재 상태 요약
90
103
  ```
91
104
 
105
+ ### 자동 루프
106
+
107
+ 두 루프를 동시에 실행하면 review 요청과 리뷰 대응을 모두 자동화합니다:
108
+
109
+ ```bash
110
+ node src/review-loop.js & # 내게 요청된 PR 자동 리뷰
111
+ node src/respond-loop.js & # 내 PR 리뷰 자동 대응
112
+ ```
113
+
92
114
  ### 모니터 대시보드
93
115
 
94
116
  ```bash
@@ -98,26 +120,48 @@ npm run monitor
98
120
  ```
99
121
 
100
122
  ```
101
- ╔══════════════════════════════════════════════════════════════════╗
102
- byLane Monitor Issue #123: "Add dark mode" 4m 31s 17:32 ║
103
- ╠═══════════════════════════╦══════════════════════════════════════╣
104
- AGENT PIPELINE ║ AGENT LOG [LIVE]
105
- ║ ║ ║
106
- issue-agent [] 완료 17:32:38 code-agent
107
- code-agent [▶] 67% ║ → ThemeToggle.tsx 생성 ║
108
- ║ test-agent [○] 대기 ║ 17:30:09 issue-agent ║
109
- ... ║ → ✓ spec.json 저장됨 ║
110
- ╠═══════════════════════════╬══════════════════════════════════════╣
111
- QUEUE ║ SYSTEM STATUS ║
112
- ║ 1 Issue #124 대기중 ║ GitHub ✓ 연결됨 ║
113
- ║ 2 PR #45 review ║ Slack ✓ #dev-alerts ║
114
- ╚═══════════════════════════╩══════════════════════════════════════╝
115
- [q]종료 [p]일시정지 [↑↓]로그스크롤
123
+ +---------------------------+--------------------------------------+
124
+ | AGENT PIPELINE | AGENT LOG [LIVE] |
125
+ | | |
126
+ | issue-agent [v] 완료 | 17:32:38 code-agent |
127
+ | code-agent [>] 67% | > ThemeToggle.tsx 생성 |
128
+ | test-agent [ ] 대기 | 17:30:09 issue-agent |
129
+ | ... | > spec.json 저장됨 |
130
+ +---------------------------+--------------------------------------+
131
+ | QUEUE | SYSTEM STATUS |
132
+ | 1 Issue #124 대기중 | GitHub OK 연결됨 |
133
+ | 2 PR #45 review | Slack OK #dev-alerts |
134
+ +---------------------------+--------------------------------------+
116
135
  ```
117
136
 
118
- ## 브랜치 네이밍 패턴
137
+ ## 프로젝트 분석 (analyze)
138
+
139
+ `/bylane analyze`를 실행하면 현재 프로젝트를 자동 분석하여 Claude Code가 참조할 수 있는 instruction 파일을 생성합니다.
140
+
141
+ ### 생성되는 파일
142
+
143
+ | 파일 | 내용 |
144
+ |---|---|
145
+ | `.claude/instructions/code-style.md` | 언어, 포맷팅, 네이밍 컨벤션, import 규칙, 금지 패턴 |
146
+ | `.claude/instructions/design-tokens.md` | 색상 팔레트, 타이포그래피, 간격, 브레이크포인트, 다크모드 |
147
+ | `.claude/instructions/architecture.md` | 프레임워크, 렌더링 전략, 상태관리, 데이터 페칭, 폴더 구조 |
148
+
149
+ ### 동작 방식
150
+
151
+ 1. ESLint/Prettier/tsconfig, Tailwind config, CSS 변수, package.json 등 설정 파일을 자동 탐색
152
+ 2. 소스 파일을 샘플링하여 실제 사용 패턴 파악
153
+ 3. 분석 결과를 `.claude/instructions/`에 Markdown 파일로 저장
154
+ 4. `CLAUDE.md`에 `@.claude/instructions/*.md` import 구문 자동 추가
155
+ - `CLAUDE.md`가 없으면 `/init`으로 먼저 생성
156
+
157
+ ```
158
+ /bylane analyze # 분석 후 파일 생성 (기존 파일 확인 요청)
159
+ /bylane analyze --force # 기존 instruction 파일 강제 덮어쓰기
160
+ ```
119
161
 
120
- 셋업 패턴을 정의하거나 `.bylane/bylane.json`에서 직접 설정:
162
+ 커스텀 내용은 `.claude/instructions/structure.md`를 직접 작성하고 CLAUDE.md에 `@.claude/instructions/structure.md`를 추가하면 재분석 시에도 유지됩니다.
163
+
164
+ ## 브랜치 네이밍 패턴
121
165
 
122
166
  | 패턴 | 예시 |
123
167
  |---|---|
@@ -134,6 +178,11 @@ npm run monitor
134
178
  ```json
135
179
  {
136
180
  "version": "1.0",
181
+ "github": {
182
+ "method": "auto",
183
+ "owner": "",
184
+ "repo": ""
185
+ },
137
186
  "trackers": {
138
187
  "primary": "github",
139
188
  "linear": { "enabled": false, "apiKey": "" }
@@ -152,6 +201,26 @@ npm run monitor
152
201
  "tokens": { "tracker": "issues", "type": "feature", "custom-id": "" },
153
202
  "caseStyle": "kebab-case"
154
203
  },
204
+ "models": {
205
+ "default": "claude-sonnet-4-6",
206
+ "orchestrator": "claude-opus-4-6",
207
+ "issue-agent": "claude-opus-4-6",
208
+ "code-agent": "claude-sonnet-4-6",
209
+ "review-agent": "claude-sonnet-4-6",
210
+ "respond-agent": "claude-opus-4-6",
211
+ "test-agent": "claude-haiku-4-5-20251001",
212
+ "commit-agent": "claude-haiku-4-5-20251001",
213
+ "pr-agent": "claude-haiku-4-5-20251001",
214
+ "notify-agent": "claude-haiku-4-5-20251001"
215
+ },
216
+ "review": {
217
+ "model": "claude-sonnet-4-6",
218
+ "language": "ko",
219
+ "includeModel": true,
220
+ "includeCodeExample": true,
221
+ "templateFile": "",
222
+ "footer": "Reviewed by byLane · model: {model}"
223
+ },
155
224
  "extensions": {
156
225
  "figma": { "enabled": false, "useAt": "issue-analysis" }
157
226
  }
@@ -170,15 +239,50 @@ orchestrator
170
239
  → review-agent (자동 리뷰)
171
240
  → respond-agent (리뷰 반박 또는 반영)
172
241
  → notify-agent (Slack/Telegram 알림)
242
+
243
+ review-loop (독립 실행: 5분 주기 리뷰 요청 감지)
244
+ respond-loop (독립 실행: 5분 주기 리뷰 코멘트 감지)
173
245
  ```
174
246
 
175
- 에이전트는 수동 단독 실행 가능하며, 타인의 PR/리뷰에도 대응합니다.
247
+ ## GitHub 접근 방법
248
+
249
+ `github.method` 설정으로 제어:
250
+
251
+ | 값 | 동작 |
252
+ |----|------|
253
+ | `"auto"` (기본) | MCP → CLI → API 순서로 자동 시도 |
254
+ | `"mcp"` | GitHub MCP 도구만 사용 |
255
+ | `"cli"` | `gh` CLI만 사용 |
256
+ | `"api"` | REST API + `$GITHUB_TOKEN`만 사용 |
257
+
258
+ ## 리뷰 템플릿
259
+
260
+ `templates/review-template.md`를 복사해 커스터마이즈한 뒤 `review.templateFile`에 경로를 지정합니다.
261
+
262
+ 기본 구성: 심각도 레이블 (CRITICAL/HIGH/MEDIUM/LOW), Before/After 코드 예시, 사용 모델 명시, 커스텀 푸터.
263
+
264
+ ## 보안
265
+
266
+ `npm install` 시 pre-commit 훅이 자동 등록됩니다. 커밋마다 아래를 검사합니다:
267
+
268
+ | 항목 | 심각도 |
269
+ |------|--------|
270
+ | AWS/OpenAI/GitHub/Slack/Google 키 패턴 | CRITICAL (차단) |
271
+ | `.env`, `.pem`, `credentials` 등 민감 파일 | CRITICAL (차단) |
272
+ | 하드코딩된 password/api_key | CRITICAL (차단) |
273
+ | `node_modules` 실수 커밋 | CRITICAL (차단) |
274
+ | `console.log` | WARN (경고만) |
275
+
276
+ 우회: `git commit --no-verify`
176
277
 
177
278
  ## 개발
178
279
 
179
280
  ```bash
180
- npm test # 테스트 실행 (19개)
181
- npm run monitor # 모니터 대시보드
281
+ npm install # 의존성 설치 + pre-commit 훅 등록
282
+ npm test # 테스트 실행 (19개)
283
+ npm run monitor # 모니터 대시보드
284
+ npm version minor # 버전 올리기
285
+ npm run release # npm 배포 (커밋/푸시 후 실행)
182
286
  ```
183
287
 
184
288
  ## 라이선스
@@ -10,6 +10,7 @@ description: byLane 메인 커맨드. 자연어로 전체 개발 워크플로우
10
10
  ```
11
11
  /bylane [자연어 명령] — 전체 워크플로우 자동 실행
12
12
  /bylane setup — 셋업 위자드 (재실행 가능)
13
+ /bylane analyze — 프로젝트 분석 후 .claude/instructions/ 에 instruction 파일 생성
13
14
  /bylane monitor — 실시간 TUI 대시보드
14
15
  /bylane issue [#번호 | 텍스트]
15
16
  /bylane code [#번호]
@@ -39,6 +40,7 @@ description: byLane 메인 커맨드. 자연어로 전체 개발 워크플로우
39
40
  | `commit` | `bylane-commit-agent` |
40
41
  | `pr` | `bylane-pr-agent` |
41
42
  | `review` | `bylane-review-agent` |
43
+ | `analyze` | `bylane-analyze-agent` |
42
44
  | `review-loop` | `bylane-review-loop` |
43
45
  | `respond` | `bylane-respond-agent` |
44
46
  | `respond-loop` | `bylane-respond-loop` |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elyun/bylane",
3
- "version": "1.5.0",
3
+ "version": "1.7.0",
4
4
  "description": "Frontend development harness for Claude Code",
5
5
  "type": "module",
6
6
  "bin": {
@@ -0,0 +1,368 @@
1
+ ---
2
+ name: bylane-analyze-agent
3
+ description: 현재 프로젝트를 분석하여 코드 스타일, 디자인 토큰, 아키텍처, 폴더 구조를 `.claude/instructions/` 하위에 instruction 파일로 저장하고 CLAUDE.md에 import를 추가한다.
4
+ ---
5
+
6
+ # Analyze Agent
7
+
8
+ 프로젝트의 코드 스타일, 디자인 토큰, 아키텍처, 폴더 구조를 분석하여
9
+ Claude Code가 해당 프로젝트의 컨텍스트를 이해할 수 있는 instruction 파일을 생성한다.
10
+
11
+ **사용 모델: `claude-opus-4-6`** — 정확한 패턴 추론을 위해 Opus를 사용한다.
12
+ orchestrator에서 이 에이전트를 호출할 때 `model: "claude-opus-4-6"`을 전달한다.
13
+
14
+ ## 실행 전 상태 기록
15
+
16
+ ```bash
17
+ node -e "
18
+ import('PATH_TO_BYLANE/src/state.js').then(({writeState}) => {
19
+ writeState('analyze-agent', {
20
+ status: 'in_progress',
21
+ startedAt: new Date().toISOString(),
22
+ progress: 0,
23
+ currentTask: '프로젝트 분석 시작',
24
+ retries: 0,
25
+ log: []
26
+ })
27
+ })
28
+ "
29
+ ```
30
+
31
+ ## Step 1 — 분석 대상 파일 수집
32
+
33
+ 다음 파일들을 읽어 분석 데이터를 수집한다:
34
+
35
+ ### 코드 스타일 관련
36
+ ```bash
37
+ # ESLint
38
+ cat .eslintrc* eslint.config* .eslintignore 2>/dev/null
39
+
40
+ # Prettier
41
+ cat .prettierrc* prettier.config* 2>/dev/null
42
+
43
+ # TypeScript
44
+ cat tsconfig*.json 2>/dev/null
45
+
46
+ # Stylelint
47
+ cat .stylelintrc* 2>/dev/null
48
+
49
+ # EditorConfig
50
+ cat .editorconfig 2>/dev/null
51
+
52
+ # 실제 소스 파일 샘플 (패턴 파악용)
53
+ find src -name "*.ts" -o -name "*.tsx" -o -name "*.js" -o -name "*.jsx" 2>/dev/null | head -20
54
+ ```
55
+
56
+ ### 디자인 토큰 관련
57
+ ```bash
58
+ # Tailwind
59
+ cat tailwind.config* 2>/dev/null
60
+
61
+ # CSS 변수
62
+ grep -r "^:root" --include="*.css" --include="*.scss" -l 2>/dev/null | head -5
63
+
64
+ # styled-components / emotion 테마
65
+ find src -name "theme*" -o -name "tokens*" -o -name "colors*" 2>/dev/null | head -10
66
+
67
+ # CSS modules
68
+ find src -name "*.module.css" -o -name "*.module.scss" 2>/dev/null | head -5
69
+
70
+ # design system
71
+ find . -path "*/design-system/*" -o -path "*/design-tokens/*" 2>/dev/null | head -10
72
+ ```
73
+
74
+ ### 아키텍처 관련
75
+ ```bash
76
+ # package.json (의존성, 스크립트)
77
+ cat package.json 2>/dev/null
78
+
79
+ # Next.js
80
+ cat next.config* 2>/dev/null
81
+
82
+ # Vite
83
+ cat vite.config* 2>/dev/null
84
+
85
+ # 상태 관리
86
+ grep -r "createStore\|configureStore\|createSlice\|useRecoilState\|atom\|create(" \
87
+ --include="*.ts" --include="*.tsx" -l 2>/dev/null | head -5
88
+
89
+ # 라우팅
90
+ find src -name "router*" -o -name "routes*" -o -name "routing*" 2>/dev/null | head -5
91
+ ```
92
+
93
+ ### 폴더 구조
94
+ ```bash
95
+ find . -maxdepth 4 \
96
+ -not -path "*/node_modules/*" \
97
+ -not -path "*/.git/*" \
98
+ -not -path "*/.next/*" \
99
+ -not -path "*/dist/*" \
100
+ -not -path "*/build/*" \
101
+ -not -path "*/.bylane/*" \
102
+ -type f | head -100
103
+ ```
104
+
105
+ ## Step 2 — 각 영역 분석 및 정리
106
+
107
+ 수집된 데이터를 바탕으로 아래 네 가지 영역을 분석한다.
108
+
109
+ ### 2-1. 코드 스타일 분석
110
+
111
+ 다음 항목을 파악한다:
112
+ - **언어**: TypeScript / JavaScript / 혼용 여부, strict 모드
113
+ - **포맷팅**: indent(공백/탭, 너비), 따옴표 스타일, 세미콜론, trailing comma, print width
114
+ - **네이밍 컨벤션**: 컴포넌트(PascalCase), 함수/변수(camelCase), 상수(UPPER_CASE), 파일명 패턴
115
+ - **import 순서**: 외부 라이브러리 → 내부 모듈 순 여부, 절대경로 alias (`@/`, `~/`)
116
+ - **컴포넌트 패턴**: 함수형/클래스형, default/named export, props 타입 정의 방식
117
+ - **주석 스타일**: JSDoc, 인라인 주석 언어 (한국어/영어)
118
+ - **금지 패턴**: `console.log`, `any` 타입, `!` non-null assertion 등
119
+
120
+ ### 2-2. 디자인 토큰 분석
121
+
122
+ 다음 항목을 파악한다:
123
+ - **색상**: primary, secondary, accent, background, text, border, error, success, warning 팔레트
124
+ - **타이포그래피**: font-family, font-size 스케일, font-weight, line-height, letter-spacing
125
+ - **간격**: spacing 스케일 (4/8px 기반 등)
126
+ - **브레이크포인트**: mobile/tablet/desktop 분기점
127
+ - **반응형 접근**: mobile-first / desktop-first
128
+ - **다크모드**: CSS 변수 기반 / Tailwind dark: / 별도 테마 객체
129
+ - **그림자, 테두리 반경**: shadow, border-radius 스케일
130
+ - **토큰 위치**: 어느 파일/변수에 정의되어 있는지
131
+
132
+ 토큰을 찾지 못한 경우 "감지되지 않음" 으로 표기.
133
+
134
+ ### 2-3. 아키텍처 분석
135
+
136
+ 다음 항목을 파악한다:
137
+ - **프레임워크**: Next.js / Vite+React / Vue / Nuxt 등, 버전
138
+ - **렌더링 전략**: SSR / SSG / CSR / ISR, App Router / Pages Router
139
+ - **상태 관리**: Redux / Zustand / Recoil / Jotai / Context API / 없음
140
+ - **데이터 페칭**: SWR / React Query / Apollo / fetch / axios, 캐싱 전략
141
+ - **폼 관리**: React Hook Form / Formik / 직접 구현
142
+ - **스타일링**: Tailwind / CSS Modules / styled-components / emotion / 혼용
143
+ - **테스트**: Jest / Vitest / Testing Library / Playwright / Cypress
144
+ - **주요 서드파티 의존성**: 핵심 라이브러리 목록과 용도
145
+
146
+ ### 2-4. 폴더 구조 분석
147
+
148
+ 다음 항목을 파악한다:
149
+ - **최상위 디렉토리**: `src/`, `app/`, `pages/`, `components/`, `lib/`, `utils/`, `hooks/` 등
150
+ - **컴포넌트 조직**: feature-based / type-based / atomic design
151
+ - **공유 코드 위치**: 공통 컴포넌트, 유틸, 훅의 위치
152
+ - **API/서버 코드 위치**: `api/`, `server/`, `services/`
153
+ - **에셋 위치**: 이미지, 폰트, 아이콘
154
+ - **환경 설정**: `.env` 파일 구조
155
+
156
+ ## Step 3 — instruction 파일 생성
157
+
158
+ `.claude/instructions/` 디렉토리를 생성하고 각 파일을 저장한다:
159
+
160
+ ```bash
161
+ mkdir -p .claude/instructions
162
+ ```
163
+
164
+ ### `.claude/instructions/code-style.md`
165
+
166
+ ```markdown
167
+ # 코드 스타일 가이드
168
+
169
+ > byLane analyze-agent가 자동 생성 · 마지막 업데이트: {날짜}
170
+ > 수동 수정 가능. `/bylane analyze`로 재분석하면 덮어씁니다.
171
+
172
+ ## 언어 및 타입
173
+ {TypeScript/JavaScript 버전, strict 설정}
174
+
175
+ ## 포맷팅
176
+ - indent: {2 or 4 spaces / tabs}
177
+ - 따옴표: {single / double}
178
+ - 세미콜론: {있음 / 없음}
179
+ - trailing comma: {all / es5 / none}
180
+ - print width: {80 / 100 / 120}
181
+
182
+ ## 네이밍 컨벤션
183
+ - 컴포넌트: PascalCase (`UserProfile`, `DarkModeToggle`)
184
+ - 함수/변수: camelCase
185
+ - 상수: {UPPER_SNAKE_CASE / camelCase}
186
+ - 파일명: {kebab-case / PascalCase / camelCase}
187
+ - CSS 클래스: {BEM / camelCase / kebab-case}
188
+
189
+ ## Import
190
+ - 경로 alias: {`@/` → `src/`, 없음}
191
+ - import 순서: 외부 라이브러리 → 내부 경로 → 상대 경로
192
+ {추가 import 규칙}
193
+
194
+ ## 컴포넌트 패턴
195
+ {함수형 컴포넌트 예시, props 타입 정의 방식}
196
+
197
+ ## 주석
198
+ - 언어: {한국어 / 영어}
199
+ - 스타일: {JSDoc / 인라인 // / 없음}
200
+
201
+ ## 금지 패턴
202
+ {eslint 규칙에서 추출한 주요 금지 패턴}
203
+ ```
204
+
205
+ ### `.claude/instructions/design-tokens.md`
206
+
207
+ ```markdown
208
+ # 디자인 토큰
209
+
210
+ > byLane analyze-agent가 자동 생성 · 마지막 업데이트: {날짜}
211
+ > 수동 수정 가능. `/bylane analyze`로 재분석하면 덮어씁니다.
212
+
213
+ ## 색상 팔레트
214
+ {발견된 색상 토큰 — CSS 변수명 또는 Tailwind 키 포함}
215
+
216
+ 예시 형식:
217
+ | 용도 | 변수명 / 클래스 | 값 |
218
+ |---|---|---|
219
+ | Primary | `--color-primary` / `bg-primary-500` | `#3B82F6` |
220
+
221
+ ## 타이포그래피
222
+ {font-family, size 스케일, weight, line-height}
223
+
224
+ ## 간격 스케일
225
+ {spacing 값 — Tailwind 기본 / 커스텀 스케일}
226
+
227
+ ## 브레이크포인트
228
+ {sm/md/lg/xl 분기점}
229
+
230
+ ## 반응형 전략
231
+ {mobile-first / desktop-first, 사용 방법}
232
+
233
+ ## 다크모드
234
+ {지원 여부, 구현 방식}
235
+
236
+ ## 토큰 파일 위치
237
+ {실제 토큰이 정의된 파일 경로}
238
+ ```
239
+
240
+ ### `.claude/instructions/architecture.md`
241
+
242
+ ```markdown
243
+ # 프로젝트 아키텍처
244
+
245
+ > byLane analyze-agent가 자동 생성 · 마지막 업데이트: {날짜}
246
+ > 수동 수정 가능. `/bylane analyze`로 재분석하면 덮어씁니다.
247
+
248
+ ## 프레임워크 & 런타임
249
+ - 프레임워크: {Next.js 14 App Router / Vite + React 18 / ...}
250
+ - Node.js: {버전}
251
+ - 패키지 매니저: {npm / yarn / pnpm}
252
+
253
+ ## 렌더링 전략
254
+ {SSR / SSG / CSR / ISR, 어떤 페이지에 어떤 전략 사용}
255
+
256
+ ## 상태 관리
257
+ {라이브러리, 스토어 위치, 사용 패턴}
258
+
259
+ ## 데이터 페칭
260
+ {라이브러리, 패턴, API base URL 위치}
261
+
262
+ ## 스타일링
263
+ {라이브러리, 설정 파일 위치}
264
+
265
+ ## 테스트
266
+ {프레임워크, 실행 명령, 테스트 파일 위치 패턴}
267
+
268
+ ## 주요 의존성
269
+ {핵심 라이브러리와 용도 목록}
270
+
271
+ ## 폴더 구조
272
+ {프로젝트 디렉토리 트리 (핵심 부분만)}
273
+
274
+ ## 컨벤션
275
+ {이 프로젝트 특유의 패턴이나 주의사항}
276
+ ```
277
+
278
+ ## Step 4 — CLAUDE.md 업데이트
279
+
280
+ ### CLAUDE.md 존재 확인
281
+
282
+ ```bash
283
+ test -f CLAUDE.md && echo "exists" || echo "not_found"
284
+ ```
285
+
286
+ **없는 경우**: `/init` 커맨드를 실행하여 CLAUDE.md를 먼저 생성한다.
287
+ CLAUDE.md 생성 후 Step 4를 계속한다.
288
+
289
+ ### import 섹션 추가
290
+
291
+ CLAUDE.md의 상단 (첫 번째 `#` 헤딩 이전) 또는 기존 import 블록 뒤에 아래 내용을 추가한다.
292
+ 이미 같은 경로가 있으면 중복 추가하지 않는다:
293
+
294
+ ```markdown
295
+ @.claude/instructions/code-style.md
296
+ @.claude/instructions/design-tokens.md
297
+ @.claude/instructions/architecture.md
298
+ ```
299
+
300
+ Claude Code는 CLAUDE.md에서 `@경로` 형식으로 다른 파일을 자동으로 로드한다.
301
+
302
+ ### 추가 방법
303
+
304
+ ```python
305
+ # 의사코드 — Read 도구로 CLAUDE.md 읽은 후 Edit 도구로 수정
306
+ lines = read("CLAUDE.md")
307
+ imports_to_add = [
308
+ "@.claude/instructions/code-style.md",
309
+ "@.claude/instructions/design-tokens.md",
310
+ "@.claude/instructions/architecture.md",
311
+ ]
312
+ # 이미 있는 항목 제외
313
+ missing = [i for i in imports_to_add if i not in lines]
314
+ if missing:
315
+ # 첫 번째 줄에 삽입 (또는 기존 @ import 블록 마지막에 추가)
316
+ insert_at_top(missing)
317
+ ```
318
+
319
+ ## Step 5 — 완료 처리
320
+
321
+ ```bash
322
+ node -e "
323
+ import('PATH_TO_BYLANE/src/state.js').then(({writeState}) => {
324
+ writeState('analyze-agent', {
325
+ status: 'completed',
326
+ progress: 100,
327
+ currentTask: '분석 완료',
328
+ retries: 0,
329
+ generatedFiles: [
330
+ '.claude/instructions/code-style.md',
331
+ '.claude/instructions/design-tokens.md',
332
+ '.claude/instructions/architecture.md'
333
+ ]
334
+ })
335
+ })
336
+ "
337
+ ```
338
+
339
+ 분석 결과 요약을 사용자에게 출력한다:
340
+
341
+ ```
342
+ 분석 완료!
343
+
344
+ 생성된 파일:
345
+ .claude/instructions/code-style.md — 코드 스타일, 네이밍 컨벤션
346
+ .claude/instructions/design-tokens.md — 색상, 타이포, 간격, 브레이크포인트
347
+ .claude/instructions/architecture.md — 프레임워크, 상태관리, 주요 의존성
348
+
349
+ CLAUDE.md에 import 추가 완료.
350
+ 다음 Claude Code 세션부터 이 프로젝트의 컨텍스트를 자동으로 로드합니다.
351
+
352
+ 재분석: /bylane analyze
353
+ ```
354
+
355
+ ## 수동 실행
356
+
357
+ ```
358
+ /bylane analyze
359
+ ```
360
+
361
+ ## 주의사항
362
+
363
+ - `--force` 옵션: 기존 instruction 파일을 강제로 덮어씀
364
+ 기본값: 파일이 이미 있으면 덮어쓰기 전에 사용자에게 확인 요청
365
+ - 디자인 토큰이나 코드 스타일이 감지되지 않은 항목은 "감지되지 않음" 으로 표기하고,
366
+ 사용자가 직접 채울 수 있도록 TODO 주석을 남긴다
367
+ - `.claude/instructions/` 파일은 수동으로 수정해도 된다 — `/bylane analyze` 재실행 시 덮어쓰므로
368
+ 커스텀 내용은 별도 파일로 분리하거나 `@.claude/instructions/structure.md` 를 직접 작성한다
@@ -27,6 +27,7 @@ import('./src/config.js').then(({loadConfig, getAgentModel}) => {
27
27
  'commit-agent','pr-agent','review-agent','respond-agent','notify-agent'
28
28
  ]
29
29
  agents.forEach(a => console.log(a + ': ' + getAgentModel(config, a)))
30
+ // analyze-agent는 항상 opus 사용 (config 무관)
30
31
  })
31
32
  "
32
33
  ```
@@ -47,6 +48,7 @@ import('./src/config.js').then(({loadConfig, getAgentModel}) => {
47
48
  | "커밋해줘" | commit-agent |
48
49
  | "PR 만들어줘" | pr-agent |
49
50
  | "테스트해줘" | test-agent |
51
+ | "프로젝트 분석", "analyze", "코드스타일 분석", "디자인토큰 분석" | analyze-agent |
50
52
 
51
53
  ## 에이전트 실행 방법
52
54
 
package/src/config.js CHANGED
@@ -50,7 +50,8 @@ export const DEFAULT_CONFIG = {
50
50
  'pr-agent': 'claude-haiku-4-5-20251001',
51
51
  'review-agent': 'claude-sonnet-4-6',
52
52
  'respond-agent': 'claude-opus-4-6',
53
- 'notify-agent': 'claude-haiku-4-5-20251001'
53
+ 'notify-agent': 'claude-haiku-4-5-20251001',
54
+ 'analyze-agent': 'claude-opus-4-6'
54
55
  },
55
56
  review: {
56
57
  model: 'claude-sonnet-4-6',