@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 +37 -14
- package/README.md +135 -31
- package/commands/bylane.md +2 -0
- package/package.json +1 -1
- package/skills/analyze-agent.md +368 -0
- package/skills/orchestrator.md +2 -0
- package/src/config.js +2 -1
package/CLAUDE.md
CHANGED
|
@@ -10,34 +10,43 @@ byLane — Claude Code용 프론트엔드 개발 자동화 하네스.
|
|
|
10
10
|
## 커맨드
|
|
11
11
|
|
|
12
12
|
```bash
|
|
13
|
-
# 의존성 설치
|
|
14
|
-
npm
|
|
15
|
-
|
|
16
|
-
#
|
|
17
|
-
npm
|
|
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/
|
|
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 (
|
|
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
|
-
|
|
58
|
-
1.
|
|
59
|
-
2.
|
|
60
|
-
3.
|
|
61
|
-
4.
|
|
62
|
-
5.
|
|
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
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
181
|
-
npm
|
|
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
|
## 라이선스
|
package/commands/bylane.md
CHANGED
|
@@ -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
|
@@ -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` 를 직접 작성한다
|
package/skills/orchestrator.md
CHANGED
|
@@ -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',
|