@su-record/vibe 2.8.0 → 2.8.2

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.
Files changed (19) hide show
  1. package/README.md +320 -322
  2. package/commands/vibe.figma.md +1520 -0
  3. package/dist/cli/commands/figma.d.ts +35 -0
  4. package/dist/cli/commands/figma.d.ts.map +1 -0
  5. package/dist/cli/commands/figma.js +426 -0
  6. package/dist/cli/commands/figma.js.map +1 -0
  7. package/dist/cli/commands/index.d.ts +1 -0
  8. package/dist/cli/commands/index.d.ts.map +1 -1
  9. package/dist/cli/commands/index.js +1 -0
  10. package/dist/cli/commands/index.js.map +1 -1
  11. package/dist/cli/commands/info.d.ts.map +1 -1
  12. package/dist/cli/commands/info.js +6 -0
  13. package/dist/cli/commands/info.js.map +1 -1
  14. package/dist/cli/index.d.ts.map +1 -1
  15. package/dist/cli/index.js +39 -1
  16. package/dist/cli/index.js.map +1 -1
  17. package/dist/cli/types.d.ts +22 -0
  18. package/dist/cli/types.d.ts.map +1 -1
  19. package/package.json +1 -1
package/README.md CHANGED
@@ -6,9 +6,9 @@
6
6
  [![TypeScript](https://img.shields.io/badge/TypeScript-5.5+-blue)](https://www.typescriptlang.org/)
7
7
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
8
8
 
9
- **설치 한 줄로 56개 에이전트, 43+ 도구, 멀티 LLM 오케스트레이션을 더합니다.**
9
+ **One install adds 56 agents, 36 skills, multi-LLM orchestration, and automated quality gates to your AI coding workflow.**
10
10
 
11
- Claude Code, Codex, Cursor, Gemini CLI 모두 지원.
11
+ Works with Claude Code, Codex, Cursor, and Gemini CLI.
12
12
 
13
13
  ```bash
14
14
  npm install -g @su-record/vibe
@@ -17,408 +17,434 @@ vibe init
17
17
 
18
18
  ---
19
19
 
20
- ## 왜 Vibe인가
20
+ ## Why Vibe
21
21
 
22
- AI에게 "로그인 기능 만들어줘"라고 던지면 동작은 하지만 품질은 운에 맡기게 됩니다.
23
- Vibe는 구조로 해결합니다.
22
+ AI generates working code, but quality is left to chance.
23
+ Vibe solves this structurally.
24
24
 
25
- | 문제 | 해결 |
26
- |------|------|
27
- | AI가 `any` 타입 남발 | Quality Gate가 `any`/`@ts-ignore` 차단 |
28
- | 한 번에 완성 기대 | SPEC → 구현 → 검증 단계별 워크플로우 |
29
- | 리뷰 없이 머지 | 12개 에이전트 병렬 리뷰 + 경계면 불일치 감지 |
30
- | AI 결과를 그대로 수용 | GPT + Gemini 교차 검증 |
31
- | 컨텍스트 소실 | Session RAG로 자동 저장/복원 |
32
- | 복잡한 작업에서 길을 잃음 | SwarmOrchestrator 자동 분해 + 병렬 실행 |
25
+ | Problem | Solution |
26
+ |---------|----------|
27
+ | AI scatters `any` types | Quality Gate blocks `any` / `@ts-ignore` |
28
+ | Expecting one-shot perfection | SPEC → Implement → Verify staged workflow |
29
+ | Merging without review | 12 agents run parallel code review |
30
+ | Accepting AI output blindly | GPT + Gemini cross-validation |
31
+ | Losing context between sessions | Session RAG auto-saves and restores |
32
+ | Getting lost on complex tasks | SwarmOrchestrator auto-decomposes + parallelizes |
33
33
 
34
- ### 설계 철학
34
+ ### Design Philosophy
35
35
 
36
- | 원칙 | 설명 |
37
- |------|------|
38
- | **Easy Vibe Coding** | 빠른 흐름, AI와 협업하며 생각하기 |
39
- | **Minimum Quality Guaranteed** | 타입 안전성, 코드 품질, 보안 — 자동 하한선 |
40
- | **Iterative Reasoning** | 문제를 쪼개고 질문하며 함께 추론 |
36
+ | Principle | Description |
37
+ |-----------|-------------|
38
+ | **Easy Vibe Coding** | Fast flow — think collaboratively with AI |
39
+ | **Minimum Quality Guaranteed** | Type safety, code quality, security — automatic baseline |
40
+ | **Iterative Reasoning** | Break down problems, ask questions, reason together |
41
41
 
42
42
  ---
43
43
 
44
- ## 멀티 CLI 지원
44
+ ## Workflow
45
45
 
46
- | CLI | 설치 방식 | 에이전트 | 스킬 | 지시사항 |
47
- |-----|----------|---------|------|---------|
48
- | **Claude Code** | `~/.claude/agents/` (YAML frontmatter) | 56개 | `~/.claude/skills/` | `CLAUDE.md` |
49
- | **Codex** | `~/.codex/plugins/vibe/` (Plugin) | 56개 | 플러그인 내장 | `AGENTS.md` |
50
- | **Cursor** | `~/.cursor/agents/` | 56개 | `~/.cursor/skills/` | `.cursorrules` |
51
- | **Gemini CLI** | `~/.gemini/agents/` | 56개 | `~/.gemini/skills/` | `GEMINI.md` |
52
-
53
- ### Codex 플러그인 통합
54
-
55
- Codex Claude Code 플러그인(`codex-plugin-cc`) 설치 시 워크플로우 전 단계에서 자동 활용:
56
-
57
- | 워크플로우 | Codex 활용 | 명령 |
58
- |-----------|-----------|------|
59
- | **spec review** | SPEC 설계 도전 리뷰 | `/codex:adversarial-review` |
60
- | **run** | 병렬 구현 위임 | `/codex:rescue --background` |
61
- | **run / review** | 3중 교차 코드 리뷰 (GPT+Gemini+Codex) | `/codex:review` |
62
- | **run / review** | auto-fix 실패 시 폴백 | `/codex:rescue` |
63
- | **verify** | 최종 리뷰 게이트 | `/codex:review` |
64
- | **Stop 훅** | 코드 변경 시 자동 리뷰 | `codex-review-gate.js` |
46
+ ```mermaid
47
+ flowchart LR
48
+ A["/vibe.spec"] --> B["/vibe.spec.review"]
49
+ B --> C["/vibe.run"]
50
+ C --> D["Auto Review"]
51
+ D --> E["Done"]
52
+ ```
65
53
 
66
- Codex 미설치 시 자동 스킵 — 기존 워크플로우로 동작.
54
+ 1. **`/vibe.spec`** — Define requirements as a SPEC document (GPT + Gemini parallel research)
55
+ 2. **`/vibe.spec.review`** — SPEC quality review + Codex adversarial review (triple cross-validation)
56
+ 3. **`/vibe.run`** — Implement from SPEC (Codex rescue parallel delegation) + triple code review
57
+ 4. **Auto Review** — 12 specialized agents review in parallel + boundary verification, P1/P2 auto-fix
67
58
 
68
- `vibe init` 시 Codex 플러그인 번들도 자동 생성:
59
+ Add `ultrawork` to automate the entire pipeline:
69
60
 
70
- ```
71
- ~/.codex/plugins/vibe/
72
- ├── .codex-plugin/plugin.json # 플러그인 매니페스트
73
- ├── agents/ # 56개 에이전트 (순수 마크다운)
74
- ├── skills/ # 전역 스킬
75
- └── AGENTS.md # VIBE 지시사항
61
+ ```bash
62
+ /vibe.run "feature" ultrawork
76
63
  ```
77
64
 
78
65
  ---
79
66
 
80
- ## 워크플로우
67
+ ## Multi-CLI Support
81
68
 
82
- ```mermaid
83
- flowchart LR
84
- A["/vibe.spec"] --> B["/vibe.spec.review"]
85
- B --> C["/vibe.run"]
86
- C --> D["자동 리뷰"]
87
- D --> E["완료"]
88
- ```
69
+ | CLI | Install Location | Agents | Skills | Instructions |
70
+ |-----|-----------------|--------|--------|-------------|
71
+ | **Claude Code** | `~/.claude/agents/` | 56 | `~/.claude/skills/` | `CLAUDE.md` |
72
+ | **Codex** | `~/.codex/plugins/vibe/` | 56 | Plugin built-in | `AGENTS.md` |
73
+ | **Cursor** | `~/.cursor/agents/` | 56 | `~/.cursor/skills/` | `.cursorrules` |
74
+ | **Gemini CLI** | `~/.gemini/agents/` | 56 | `~/.gemini/skills/` | `GEMINI.md` |
89
75
 
90
- 1. **`/vibe.spec`** — 요구사항을 SPEC 문서로 정의 (GPT + Gemini 병렬 리서치)
91
- 2. **`/vibe.spec.review`** — SPEC 품질 리뷰 + Codex adversarial review (3중 교차 검증)
92
- 3. **`/vibe.run`** — SPEC 기반 구현 (Codex rescue 병렬 위임) + 3중 코드 리뷰
93
- 4. **자동 리뷰** — 12개 전문 에이전트 병렬 검토 + Codex/경계면 검증, P1/P2 자동 수정
76
+ ### Codex Plugin Integration
94
77
 
95
- `ultrawork` 키워드를 붙이면 전 과정이 자동화됩니다:
78
+ When the Codex Claude Code plugin (`codex-plugin-cc`) is installed, Vibe automatically integrates it across every workflow stage:
96
79
 
97
- ```bash
98
- /vibe.run "기능" ultrawork
99
- ```
80
+ | Workflow | Codex Usage | Command |
81
+ |----------|------------|---------|
82
+ | **spec review** | Adversarial SPEC challenge | `/codex:adversarial-review` |
83
+ | **run** | Parallel implementation delegation | `/codex:rescue --background` |
84
+ | **run / review** | Triple code review (GPT + Gemini + Codex) | `/codex:review` |
85
+ | **run / review** | Fallback on auto-fix failure | `/codex:rescue` |
86
+ | **verify** | Final review gate | `/codex:review` |
87
+ | **Stop hook** | Auto-review on code changes | `codex-review-gate.js` |
88
+
89
+ Auto-skips when Codex is not installed — existing workflow continues as-is.
100
90
 
101
91
  ---
102
92
 
103
- ## 에이전트 (56개)
93
+ ## Agents (56)
104
94
 
105
- ### 메인 에이전트 (19)
95
+ ### Core Agents (19)
106
96
 
107
- | 카테고리 | 에이전트 |
108
- |----------|---------|
109
- | **탐색** | Explorer (High/Medium/Low) |
110
- | **구현** | Implementer (High/Medium/Low) |
111
- | **설계** | Architect (High/Medium/Low) |
112
- | **유틸** | Searcher, Tester, Simplifier, Refactor Cleaner, Build Error Resolver, Compounder, Diagrammer, E2E Tester, UI Previewer, Junior Mentor |
97
+ | Category | Agents |
98
+ |----------|--------|
99
+ | **Exploration** | Explorer (High / Medium / Low) |
100
+ | **Implementation** | Implementer (High / Medium / Low) |
101
+ | **Architecture** | Architect (High / Medium / Low) |
102
+ | **Utility** | Searcher, Tester, Simplifier, Refactor Cleaner, Build Error Resolver, Compounder, Diagrammer, E2E Tester, UI Previewer, Junior Mentor |
113
103
 
114
- ### 리뷰 에이전트 (12)
104
+ ### Review Agents (12)
115
105
 
116
106
  Security, Performance, Architecture, Complexity, Simplicity, Data Integrity, Test Coverage, Git History, TypeScript, Python, Rails, React
117
107
 
118
- ### UI/UX 에이전트 (8)
108
+ ### UI/UX Agents (8)
119
109
 
120
- 24개 CSV 기반 디자인 인텔리전스. 산업 분석 → 디자인 시스템 생성 → 구현 가이드 → 접근성 감사.
110
+ Design intelligence backed by 48 CSV datasets. Industry analysis → Design system generation → Implementation guide → Accessibility audit.
121
111
 
122
- | 단계 | 에이전트 |
123
- |------|---------|
112
+ | Phase | Agents |
113
+ |-------|--------|
124
114
  | SPEC | ui-industry-analyzer, ui-design-system-gen, ui-layout-architect |
125
115
  | RUN | ui-stack-implementer, ui-dataviz-advisor |
126
116
  | REVIEW | ux-compliance-reviewer, ui-a11y-auditor, ui-antipattern-detector |
127
117
 
128
- ### QA & 리서치 (11)
118
+ ### QA & Research (11)
129
119
 
130
- | 카테고리 | 에이전트 |
131
- |----------|---------|
120
+ | Category | Agents |
121
+ |----------|--------|
132
122
  | **QA** | QA Coordinator, Edge Case Finder, Acceptance Tester |
133
- | **리서치** | Best Practices, Framework Docs, Codebase Patterns, Security Advisory |
134
- | **분석** | Requirements Analyst, UX Advisor, API Documenter, Changelog Writer |
123
+ | **Research** | Best Practices, Framework Docs, Codebase Patterns, Security Advisory |
124
+ | **Analysis** | Requirements Analyst, UX Advisor, API Documenter, Changelog Writer |
135
125
 
136
- QA Coordinator는 변경된 코드를 분석하여 적절한 QA 에이전트를 병렬 디스패치하고, 통합 QA 리포트를 생성합니다.
126
+ QA Coordinator analyzes changed code and dispatches appropriate QA agents in parallel, then produces a unified QA report.
137
127
 
138
- ### 이벤트 에이전트 (6)
128
+ ### Event Agents (6)
139
129
 
140
130
  Event Content, Event Image, Event Speaker, Event Ops, Event Comms, Event Scheduler
141
131
 
142
132
  ---
143
133
 
144
- ## 멀티 LLM 오케스트레이션
134
+ ## Skills (36)
145
135
 
146
- | 프로바이더 | 모델 | 역할 | 인증 |
147
- |-----------|------|------|------|
148
- | **Claude** | Opus / Sonnet / Haiku | SPEC 작성, 코드 리뷰, 오케스트레이션 | 내장 (Claude Code) |
149
- | **GPT** | gpt-5.4 | 추론, 아키텍처, 엣지케이스 분석 | Codex CLI / API Key |
150
- | **Codex** | gpt-5.3-codex | 구현, 멀티파일 코딩 | Codex CLI / Plugin |
151
- | **Codex Spark** | gpt-5.3-codex-spark | 초고속 리뷰/린트 (1000+ tok/s) | Codex CLI / Plugin |
152
- | **Gemini** | gemini-3.1-pro | 리서치, 교차 검증, UI/UX | gemini-cli / API Key |
136
+ Domain-specific skill modules auto-installed based on detected stack.
153
137
 
154
- ### 동적 모델 라우팅
138
+ **Core (15):** Core Capabilities, Parallel Research, Commit Push PR, Git Worktree, Handoff, Priority Todos, Tool Fallback, Context7, Tech Debt, Characterization Test, Agents MD, Claude MD Guide, Exec Plan, Arch Guard, Capability Loop
155
139
 
156
- Codex/Gemini 활성화 상태에 따라 자동 스위칭. 기본은 Claude만으로 동작.
140
+ **Design (7):** Frontend Design, UI/UX Pro Max, Design Teach, Design Audit, Design Critique, Design Polish, Design Normalize
157
141
 
158
- | 상태 | 동작 |
159
- |------|------|
160
- | **Claude only** | Opus(설계/판단) + Sonnet(리뷰/구현) + Haiku(탐색) |
161
- | **+Codex** | 구현→5.3-Codex, 리뷰→Spark, 추론→5.4 스위칭 |
162
- | **+Gemini** | 리서치/리뷰에 Gemini 병렬 추가 |
163
- | **+Codex +Gemini** | 풀 오케스트레이션 (7개 모델) |
142
+ **Domain (3):** Commerce Patterns, E2E Commerce, Video Production
164
143
 
165
- ---
144
+ **PM (3):** Create PRD, Prioritization Frameworks, User Personas
166
145
 
167
- ## 오케스트레이터
146
+ **Event (3):** Event Planning, Event Comms, Event Ops
168
147
 
169
- ### SwarmOrchestrator
148
+ **Stack-Specific (5):** TypeScript Advanced Types, Vercel React Best Practices, SEO Checklist, Brand Assets, Design Distill
170
149
 
171
- 복잡도 15점 이상인 작업을 자동 분해하여 병렬 실행합니다.
172
- 최대 깊이 2단계, 동시 실행 5개, 기본 타임아웃 5분.
150
+ ### External Skills (skills.sh)
173
151
 
174
- ### PhasePipeline
152
+ Install community skills from the [skills.sh](https://skills.sh) ecosystem:
175
153
 
176
- `prepare()` → `execute()` → `cleanup()` 생명주기.
177
- ULTRAWORK 모드에서 다음 Phase의 `prepare()`를 병렬 실행.
154
+ ```bash
155
+ vibe skills add vercel-labs/next-skills
156
+ ```
178
157
 
179
- ### BackgroundManager
158
+ Auto-installed by stack during `vibe init` / `vibe update`:
180
159
 
181
- 모델별/프로바이더별 동시 실행 제한. 타임아웃 시 retry (최대 3회, 지수 백오프). 24시간 TTL 자동 정리.
160
+ | Stack | Auto-installed Package |
161
+ |-------|----------------------|
162
+ | `typescript-react` | `vercel-labs/agent-skills` |
163
+ | `typescript-nextjs` | `vercel-labs/agent-skills`, `vercel-labs/next-skills` |
182
164
 
183
165
  ---
184
166
 
185
- ## 인프라 패턴
167
+ ## Multi-LLM Orchestration
186
168
 
187
- Agent-Lightning(Microsoft Research)의 핵심 아키텍처 패턴을 적용합니다.
169
+ | Provider | Role | Auth |
170
+ |----------|------|------|
171
+ | **Claude** (Opus / Sonnet / Haiku) | SPEC writing, code review, orchestration | Built-in (Claude Code) |
172
+ | **GPT** | Reasoning, architecture, edge-case analysis | Codex CLI / API Key |
173
+ | **Gemini** | Research, cross-validation, UI/UX | gemini-cli / API Key |
188
174
 
189
- ### Store Interface
175
+ ### Dynamic Model Routing
190
176
 
191
- `IMemoryStorage` 인터페이스로 스토어를 추상화합니다. 테스트에서 SQLite 없이 `InMemoryStorage`로 교체 가능.
177
+ Auto-switches based on active LLM availability. Defaults to Claude-only operation.
192
178
 
193
- ```typescript
194
- import { InMemoryStorage } from '@su-record/vibe/tools';
195
- const store = new InMemoryStorage(); // DB 없이 테스트
196
- ```
179
+ | State | Behavior |
180
+ |-------|----------|
181
+ | **Claude only** | Opus (design/judgment) + Sonnet (review/implementation) + Haiku (exploration) |
182
+ | **+ GPT** | Implementation → GPT, review → GPT, reasoning → GPT |
183
+ | **+ Gemini** | Research/review gets parallel Gemini |
184
+ | **+ GPT + Gemini** | Full orchestration across all models |
197
185
 
198
- ### Structured Telemetry Spans
186
+ ---
199
187
 
200
- 8종의 타입화된 스팬으로 모든 작업을 추적합니다.
188
+ ## 24 Framework Detection
201
189
 
202
- | 스팬 타입 | 용도 |
203
- |----------|------|
204
- | `skill_run` | 스킬 실행 |
205
- | `agent_run` | 에이전트 실행 |
206
- | `edit` | 파일 수정 |
207
- | `build` | 빌드/컴파일 |
208
- | `review` | 코드 리뷰 |
209
- | `hook` | 훅 실행 |
210
- | `llm_call` | LLM 호출 |
211
- | `decision` | 의사결정 |
190
+ Auto-detects project stack and applies framework-specific coding rules.
191
+ Supports monorepos (pnpm-workspace, npm workspaces, Lerna, Nx, Turborepo).
212
192
 
213
- ```typescript
214
- import { createSpan, completeSpan } from '@su-record/vibe/tools';
193
+ - **TypeScript (12)** — Next.js, React, Angular, Vue, Svelte, Nuxt, NestJS, Node, Electron, Tauri, React Native, Astro
194
+ - **Python (2)** — Django, FastAPI
195
+ - **Java/Kotlin (2)** — Spring Boot, Android
196
+ - **Other** — Rails, Go, Rust, Swift (iOS), Unity (C#), Flutter (Dart), Godot (GDScript)
215
197
 
216
- const span = createSpan('agent_run', 'explorer-low', { model: 'haiku' });
217
- // ... 작업 수행
218
- const done = completeSpan(span, 'ok', 1500);
219
- ```
198
+ Also detects: databases (PostgreSQL, MySQL, MongoDB, Redis, Prisma, Drizzle, etc.), state management (Redux, Zustand, Jotai, Pinia, etc.), CI/CD, and hosting platforms.
220
199
 
221
- 부모-자식 계층 추적을 지원합니다 (`parent_id`). 모든 데이터는 로컬 JSONL에만 저장됩니다.
200
+ ---
222
201
 
223
- ### Component Registry
202
+ ## Orchestrators
224
203
 
225
- 런타임 컴포넌트 등록/해제를 지원하는 범용 레지스트리입니다.
204
+ ### SwarmOrchestrator
226
205
 
227
- ```typescript
228
- import { ComponentRegistry } from '@su-record/vibe/tools';
206
+ Auto-decomposes tasks with complexity score ≥ 15 into parallel subtasks.
207
+ Max depth 2, concurrent limit 5, default timeout 5 min.
229
208
 
230
- const skills = new ComponentRegistry<SkillRunner>();
231
- skills.register('review', () => new ReviewRunner(), { version: '2.0' });
232
- const runner = skills.resolve('review');
233
- ```
209
+ ### PhasePipeline
210
+
211
+ `prepare()` → `execute()` → `cleanup()` lifecycle.
212
+ In ULTRAWORK mode, the next phase's `prepare()` runs in parallel.
213
+
214
+ ### BackgroundManager
215
+
216
+ Per-model/provider concurrency limits. Timeout retry (max 3, exponential backoff). 24-hour TTL auto-cleanup.
234
217
 
235
218
  ---
236
219
 
237
- ## Session RAG
220
+ ## Infrastructure
221
+
222
+ ### Session RAG
238
223
 
239
- SQLite + FTS5 하이브리드 검색으로 세션 간 컨텍스트를 유지합니다.
224
+ SQLite + FTS5 hybrid search for cross-session context persistence.
240
225
 
241
- **4가지 엔티티**: Decision, Constraint, Goal, Evidence
226
+ **4 entity types:** Decision, Constraint, Goal, Evidence
242
227
 
243
228
  ```
244
- 최종 점수 = BM25 × 0.4 + 최신성 × 0.3 + 우선순위 × 0.3
229
+ Score = BM25 × 0.4 + Recency × 0.3 + Priority × 0.3
245
230
  ```
246
231
 
247
- 세션 시작 시 활성 Goals, 중요 Constraints, 최근 Decisions 자동 주입.
232
+ On session start, active Goals, critical Constraints, and recent Decisions are auto-injected.
248
233
 
249
- ---
234
+ ### Structured Telemetry
250
235
 
251
- ## 스킬
236
+ 8 typed span kinds track all operations:
252
237
 
253
- ### 내장 스킬 (26개)
238
+ `skill_run` · `agent_run` · `edit` · `build` · `review` · `hook` · `llm_call` · `decision`
254
239
 
255
- 에이전트가 활용하는 도메인별 스킬 모듈입니다. 스택 감지 결과에 따라 자동 설치됩니다.
240
+ Parent-child hierarchy via `parent_id`. All data stays in local JSONL.
256
241
 
257
- **코어**: Core Capabilities, Parallel Research, Commit Push PR, Git Worktree, Handoff, Priority Todos, Tool Fallback, Context7, Tech Debt, Characterization Test, Agents MD, Exec Plan, Arch Guard, Capability Loop
242
+ ### Evolution System
258
243
 
259
- **프론트엔드**: Frontend Design, UI/UX Pro Max, Brand Assets, SEO Checklist
244
+ Self-improving agent/skill/rule generation with benchmarking:
260
245
 
261
- **도메인**: Commerce Patterns, E2E Commerce, Video Production
246
+ - Usage tracking and insight extraction
247
+ - Skill gap detection
248
+ - Auto-generation with evaluation runners
249
+ - Circuit breaker and rollback safety
262
250
 
263
- ### 외부 스킬 (skills.sh)
251
+ ### Component Registry
264
252
 
265
- [skills.sh](https://skills.sh) 에코시스템의 외부 스킬을 설치할 수 있습니다.
253
+ Runtime component registration/resolution with metadata:
266
254
 
267
- ```bash
268
- vibe skills add vercel-labs/next-skills
269
- ```
270
-
271
- `vibe init`/`vibe update` 시 감지된 스택에 맞는 외부 스킬이 자동 설치됩니다.
255
+ ```typescript
256
+ import { ComponentRegistry } from '@su-record/vibe/tools';
272
257
 
273
- | 스택 | 자동 설치 패키지 |
274
- |------|-----------------|
275
- | `typescript-react` | `vercel-labs/agent-skills` |
276
- | `typescript-nextjs` | `vercel-labs/agent-skills`, `vercel-labs/next-skills` |
258
+ const skills = new ComponentRegistry<SkillRunner>();
259
+ skills.register('review', () => new ReviewRunner(), { version: '2.0' });
260
+ const runner = skills.resolve('review');
261
+ ```
277
262
 
278
263
  ---
279
264
 
280
- ## 25개 프레임워크 지원
265
+ ## Hooks (16 scripts)
281
266
 
282
- 프로젝트의 기술 스택을 자동 감지하고 프레임워크별 코딩 규칙을 적용합니다.
283
- 모노레포 지원 (pnpm-workspace, npm workspaces, Lerna, Nx, Turborepo).
267
+ | Event | Script | Role |
268
+ |-------|--------|------|
269
+ | SessionStart | `session-start.js` | Restore session context, load memory |
270
+ | PreToolUse | `pre-tool-guard.js` | Block destructive commands, scope protection |
271
+ | PostToolUse | `code-check.js` | Type safety / complexity verification |
272
+ | PostToolUse | `post-edit.js` | Git index update |
273
+ | UserPromptSubmit | `prompt-dispatcher.js` | Command routing |
274
+ | UserPromptSubmit | `keyword-detector.js` | Magic keyword detection |
275
+ | Notification | `context-save.js` | Auto-save at 80/90/95% context |
284
276
 
285
- - **TypeScript (12)** — Next.js, React, Angular, Vue, Svelte, Nuxt, NestJS, Node, Electron, Tauri, React Native, Astro
286
- - **Python (2)** — Django, FastAPI
287
- - **Java/Kotlin (2)** — Spring Boot, Android
288
- - **기타** — Rails, Go, Rust, Swift (iOS), Unity (C#), Flutter (Dart), Godot (GDScript)
289
-
290
- 자동 감지: DB (PostgreSQL, MySQL, MongoDB, Redis, Prisma, Drizzle 등), 상태 관리 (Redux, Zustand, Jotai 등), CI/CD, 호스팅
277
+ Additional: `llm-orchestrate.js`, `codex-review-gate.js`, `codex-detect.js`, `sentinel-guard.js`, `skill-injector.js`, `evolution-engine.js`, `hud-status.js`, `stop-notify.js`
291
278
 
292
279
  ---
293
280
 
294
- ## 43+ 내장 도구
281
+ ## Figma → Code Pipeline
282
+
283
+ Design-to-code with responsive support and design skill integration.
295
284
 
296
- ### 메모리 & 세션 (21)
285
+ ```bash
286
+ # Single design
287
+ vibe figma setup <token>
288
+ vibe figma extract "https://figma.com/design/ABC/Project?node-id=1-2"
289
+ # then in Claude Code:
290
+ /vibe.figma "url"
291
+
292
+ # Responsive (mobile + desktop)
293
+ vibe figma extract "mobile-url" "desktop-url"
294
+ /vibe.figma "mobile-url" "desktop-url"
295
+ ```
297
296
 
298
- `save_session_item`, `retrieve_session_context`, `manage_goals`, `core_save_memory`, `core_recall_memory`, `core_search_memories`, `core_start_session`, `core_auto_save_context` 등
297
+ ### What It Does
299
298
 
300
- ### 코드 품질 & 분석 (8)
299
+ | Phase | Description |
300
+ |-------|-------------|
301
+ | **Extract** | Figma API → `layers.json` + `frame.png` + `assets/` (background images) |
302
+ | **Analyze** | Image-first analysis → viewport diff table (responsive mode) |
303
+ | **Generate** | Stack-aware code (React/Vue/Svelte/SCSS/Tailwind) + design tokens |
304
+ | **Integrate** | Maps to project's existing design system (MASTER.md, design-context.json) |
301
305
 
302
- `core_find_symbol`, `core_find_references`, `core_analyze_dependency_graph`, `core_analyze_complexity`, `core_validate_code_quality`, `core_check_coupling_cohesion`, `core_suggest_improvements`, `core_apply_quality_rules`
306
+ ### Responsive Design
303
307
 
304
- ### SPEC & 테스트 (7)
308
+ Auto-detected when 2+ URLs provided. Generates fluid scaling with `clamp()` for typography/spacing, `@media` only for layout structure changes.
305
309
 
306
- `core_spec_generator`, `core_prd_parser`, `core_traceability_matrix`, `core_preview_ui_ascii` 등
310
+ | Config | Default | Description |
311
+ |--------|---------|-------------|
312
+ | `breakpoint` | 1024px | PC↔Mobile boundary |
313
+ | `pcTarget` | 1920px | PC main target resolution |
314
+ | `mobileMinimum` | 360px | Minimum mobile viewport |
315
+ | `designPc` | 2560px | Figma PC artboard (2x) |
316
+ | `designMobile` | 720px | Figma Mobile artboard (2x) |
307
317
 
308
- ### UI/UX (4)
318
+ Customize: `vibe figma breakpoints --set breakpoint=768`
309
319
 
310
- `core_ui_search`, `core_ui_stack_search`, `core_ui_generate_design_system`, `core_ui_persist_design_system`
320
+ ### Design Skill Pipeline
311
321
 
312
- ### 반복 제어 (3+)
322
+ After code generation, chain design skills for quality assurance:
313
323
 
314
- `LoopBreaker`, `VerificationLoop`, `DecisionTracer`, `InteractiveCheckpoint`, `AutomationLevel`
324
+ ```
325
+ /vibe.figma → /design-normalize → /design-audit → /design-polish
326
+ ```
315
327
 
316
328
  ---
317
329
 
318
- ## 품질 보장
330
+ ## Quality Gates
319
331
 
320
- | 가드레일 | 메커니즘 |
321
- |----------|---------|
322
- | **타입 안전성** | Quality Gate — `any`, `@ts-ignore` 차단 |
323
- | **코드 리뷰** | 12개 Sonnet 에이전트 병렬 리뷰 + Codex 3중 교차 검증 |
324
- | **경계면 검증** | API↔프론트엔드 타입/라우팅/상태 정합성 자동 검증 |
325
- | **완성도** | Ralph Loop — 100%까지 반복 (범위 축소 없음) |
326
- | **수렴 보장** | Convergence — P1=0이면 완료, 반복 시 범위 축소 |
327
- | **스코프 보호** | pre-tool-guard — 요청 범위 외 수정 방지 |
328
- | **컨텍스트 보호** | context-save — 80/90/95% 자동 저장 |
329
- | **증거 게이트** | Evidence Gate — 증거 없는 완료 주장 금지 |
332
+ | Guard | Mechanism |
333
+ |-------|-----------|
334
+ | **Type Safety** | Quality Gate — blocks `any`, `@ts-ignore` |
335
+ | **Code Review** | 12 Sonnet agents parallel review + Codex triple cross-validation |
336
+ | **Boundary Check** | API ↔ Frontend type/routing/state consistency verification |
337
+ | **Completeness** | Ralph Loop — iterates until 100% (no scope reduction) |
338
+ | **Convergence** | P1=0 means done; scope narrows on repeated rounds |
339
+ | **Scope Protection** | pre-tool-guard — prevents out-of-scope modifications |
340
+ | **Context Protection** | context-save — auto-saves at 80/90/95% |
341
+ | **Evidence Gate** | No completion claims without evidence |
330
342
 
331
- **복잡도 제한**: 함수 ≤50줄 | 중첩 ≤3단계 | 매개변수 ≤5 | 순환 복잡도 ≤10
343
+ **Complexity limits:** Function ≤ 50 lines | Nesting ≤ 3 | Parameters ≤ 5 | Cyclomatic complexity ≤ 10
332
344
 
333
345
  ---
334
346
 
335
- ## 훅 시스템
336
-
337
- | 이벤트 | 스크립트 | 역할 |
338
- |--------|---------|------|
339
- | SessionStart | `session-start.js` | 세션 컨텍스트 복원, 메모리 로드 |
340
- | PreToolUse | `pre-tool-guard.js` | 파괴적 명령어 차단, 스코프 보호 |
341
- | PostToolUse | `code-check.js` | 타입 안전성/복잡도 검증 |
342
- | PostToolUse | `post-edit.js` | Git 인덱스 업데이트 |
343
- | UserPromptSubmit | `prompt-dispatcher.js` | 명령어 라우팅 |
344
- | UserPromptSubmit | `keyword-detector.js` | 매직 키워드 감지 |
345
- | Notification | `context-save.js` | 컨텍스트 80/90/95% 자동 저장 |
346
-
347
- 추가: `llm-orchestrate.js`, `codex-review-gate.js`, `codex-detect.js`, `code-review.js`, `recall.js`, `complexity.js`, `compound.js`, `stop-notify.js`
347
+ ## Slash Commands
348
+
349
+ | Command | Description |
350
+ |---------|-------------|
351
+ | `/vibe.spec "feature"` | Write SPEC + GPT/Gemini parallel research |
352
+ | `/vibe.spec.review` | SPEC quality review |
353
+ | `/vibe.run "feature"` | Implement from SPEC + parallel code review |
354
+ | `/vibe.verify "feature"` | BDD verification against SPEC |
355
+ | `/vibe.review` | 12-agent parallel code review |
356
+ | `/vibe.trace "feature"` | Requirements traceability matrix |
357
+ | `/vibe.reason "problem"` | Systematic reasoning framework |
358
+ | `/vibe.analyze` | Project analysis |
359
+ | `/vibe.event` | Event automation |
360
+ | `/vibe.figma "url"` | Figma design → production code (responsive, multi-URL) |
361
+ | `/vibe.utils` | Utilities (E2E, diagrams, UI, session restore) |
348
362
 
349
363
  ---
350
364
 
351
- ## 슬래시 명령어
352
-
353
- | 명령어 | 설명 |
354
- |--------|------|
355
- | `/vibe.spec "기능"` | SPEC 작성 + GPT/Gemini 병렬 리서치 |
356
- | `/vibe.spec.review` | SPEC 품질 리뷰 |
357
- | `/vibe.run "기능"` | SPEC 기반 구현 + 병렬 코드 리뷰 |
358
- | `/vibe.verify "기능"` | SPEC 대비 BDD 검증 |
359
- | `/vibe.review` | 12개 에이전트 병렬 코드 리뷰 |
360
- | `/vibe.trace "기능"` | 요구사항 추적성 매트릭스 |
361
- | `/vibe.reason "문제"` | 체계적 추론 프레임워크 |
362
- | `/vibe.analyze` | 프로젝트 분석 |
363
- | `/vibe.event` | 이벤트 자동화 |
364
- | `/vibe.utils` | 유틸리티 (E2E, 다이어그램, UI, 세션 복원) |
365
+ ## Magic Keywords
366
+
367
+ | Keyword | Effect |
368
+ |---------|--------|
369
+ | `ultrawork` / `ulw` | Parallel processing + phase pipelining + auto-continue + Ralph Loop |
370
+ | `ralph` | Iterate until 100% complete (no scope reduction) |
371
+ | `ralplan` | Iterative planning + persistence |
372
+ | `verify` | Strict verification mode |
373
+ | `quick` | Fast mode, minimal verification |
365
374
 
366
375
  ---
367
376
 
368
377
  ## CLI
369
378
 
370
379
  ```bash
371
- # 프로젝트
372
- vibe init [project] # 프로젝트 초기화
373
- vibe update # 설정 업데이트 (스택 재감지)
374
- vibe upgrade # 최신 버전으로 업그레이드
375
- vibe setup # 셋업 위자드
376
- vibe status # 상태 확인
377
- vibe remove # 제거
378
-
379
- # LLM 인증
380
+ # Project
381
+ vibe init [project] # Initialize project
382
+ vibe update # Update settings (re-detect stacks)
383
+ vibe upgrade # Upgrade to latest version
384
+ vibe setup # Interactive setup wizard
385
+ vibe status # Show status
386
+ vibe remove # Uninstall
387
+
388
+ # LLM Auth
380
389
  vibe gpt auth|key|status|logout
381
390
  vibe gemini auth|key|status|logout
382
391
  vibe claude key|status|logout
383
392
 
384
- # 외부 스킬
385
- vibe skills add <owner/repo> # skills.sh 스킬 설치
393
+ # External Skills
394
+ vibe skills add <owner/repo> # Install skills from skills.sh
386
395
 
387
- # 채널
396
+ # Figma
397
+ vibe figma setup <token> # Set Figma access token
398
+ vibe figma extract <url> [url...] # Extract layers + images from Figma
399
+ vibe figma breakpoints # Show/set responsive breakpoints
400
+ vibe figma status|logout
401
+
402
+ # Channels
388
403
  vibe telegram setup|chat|status
389
404
  vibe slack setup|channel|status
390
405
 
391
- # 기타
392
- vibe env import [path] # .env → config.json 마이그레이션
406
+ # Other
407
+ vibe env import [path] # Migrate .env → config.json
393
408
  vibe help / version
394
409
  ```
395
410
 
396
- ### 인증 우선순위
411
+ ### Auth Priority
397
412
 
398
- | 프로바이더 | 우선순위 |
399
- |-----------|---------|
413
+ | Provider | Priority |
414
+ |----------|----------|
400
415
  | **GPT** | Codex CLI → API Key |
401
- | **Gemini** | gemini-cli 자동감지 → API Key |
416
+ | **Gemini** | gemini-cli auto-detect → API Key |
402
417
 
403
418
  ---
404
419
 
405
- ## 매직 키워드
420
+ ## Subpath Exports
406
421
 
407
- | 키워드 | 효과 |
408
- |--------|------|
409
- | `ultrawork` / `ulw` | 병렬 처리 + Phase 파이프라이닝 + 자동 계속 + Ralph Loop |
410
- | `ralph` | 100% 완성까지 반복 (범위 축소 없음) |
411
- | `ralplan` | 반복적 계획 수립 + 영속화 |
412
- | `verify` | 엄격 검증 모드 |
413
- | `quick` | 빠른 모드, 최소 검증 |
422
+ ```typescript
423
+ import { MemoryStorage, SessionRAGStore } from '@su-record/vibe/memory';
424
+ import { SwarmOrchestrator, PhasePipeline } from '@su-record/vibe/orchestrator';
425
+ import { findSymbol, validateCodeQuality } from '@su-record/vibe/tools';
426
+ import { InMemoryStorage, ComponentRegistry, createSpan } from '@su-record/vibe/tools';
427
+ ```
428
+
429
+ | Subpath | Key Exports |
430
+ |---------|-------------|
431
+ | `@su-record/vibe/memory` | `MemoryStorage`, `IMemoryStorage`, `InMemoryStorage`, `KnowledgeGraph`, `SessionRAGStore` |
432
+ | `@su-record/vibe/orchestrator` | `SwarmOrchestrator`, `PhasePipeline`, `BackgroundManager` |
433
+ | `@su-record/vibe/tools` | `findSymbol`, `validateCodeQuality`, `createSpan`, `ComponentRegistry`, etc. |
434
+ | `@su-record/vibe/tools/memory` | Memory tools |
435
+ | `@su-record/vibe/tools/convention` | Code quality tools |
436
+ | `@su-record/vibe/tools/semantic` | Semantic analysis (symbol search, AST, LSP) |
437
+ | `@su-record/vibe/tools/ui` | UI/UX tools |
438
+ | `@su-record/vibe/tools/interaction` | User interaction tools |
439
+ | `@su-record/vibe/tools/time` | Time utilities |
414
440
 
415
441
  ---
416
442
 
417
- ## 설정
443
+ ## Configuration
418
444
 
419
- ### 전역: `~/.vibe/config.json`
445
+ ### Global: `~/.vibe/config.json`
420
446
 
421
- 인증, 채널, 모델 설정 통합 관리 (파일 권한 0o600).
447
+ Auth, channels, and model settings (file permissions `0o600`).
422
448
 
423
449
  ```json
424
450
  {
@@ -434,70 +460,43 @@ vibe help / version
434
460
  }
435
461
  ```
436
462
 
437
- ### 프로젝트: `.claude/vibe/config.json`
438
-
439
- 프로젝트별 설정 — language, quality, stacks, details, references, installedExternalSkills.
440
-
441
- ---
463
+ ### Project: `.claude/vibe/config.json`
442
464
 
443
- ## 모듈 서브패스 Export
444
-
445
- 런타임 모듈을 서브패스 export로 제공합니다.
446
-
447
- ```typescript
448
- import { MemoryStorage, SessionRAGStore } from '@su-record/vibe/memory';
449
- import { SwarmOrchestrator, PhasePipeline } from '@su-record/vibe/orchestrator';
450
- import { findSymbol, validateCodeQuality } from '@su-record/vibe/tools';
451
-
452
- // Agent-Lightning 패턴
453
- import { InMemoryStorage, ComponentRegistry, createSpan } from '@su-record/vibe/tools';
454
- ```
455
-
456
- | 서브패스 | 주요 export |
457
- |---------|------------|
458
- | `@su-record/vibe/memory` | `MemoryStorage`, `IMemoryStorage`, `InMemoryStorage`, `KnowledgeGraph`, `SessionRAGStore` |
459
- | `@su-record/vibe/orchestrator` | `SwarmOrchestrator`, `PhasePipeline`, `BackgroundManager` |
460
- | `@su-record/vibe/tools` | `findSymbol`, `validateCodeQuality`, `createSpan`, `ComponentRegistry` 등 |
461
- | `@su-record/vibe/tools/memory` | 메모리 도구 |
462
- | `@su-record/vibe/tools/convention` | 코드 품질 도구 |
463
- | `@su-record/vibe/tools/semantic` | 시맨틱 분석 도구 |
464
- | `@su-record/vibe/tools/ui` | UI/UX 도구 |
465
- | `@su-record/vibe/tools/interaction` | 사용자 상호작용 도구 |
466
- | `@su-record/vibe/tools/time` | 시간 도구 |
465
+ Per-project settings — language, quality, stacks, details, references, installedExternalSkills.
467
466
 
468
467
  ---
469
468
 
470
- ## 프로젝트 구조
469
+ ## Project Structure
471
470
 
472
471
  ```
473
472
  your-project/
474
473
  ├── .claude/
475
474
  │ ├── vibe/
476
- │ │ ├── config.json # 프로젝트 설정
477
- │ │ ├── constitution.md # 프로젝트 원칙
478
- │ │ ├── specs/ # SPEC 문서
479
- │ │ ├── features/ # 기능 추적
480
- │ │ ├── todos/ # P1/P2/P3 이슈
481
- │ │ └── reports/ # 리뷰 리포트
482
- │ └── skills/ # 로컬 + 외부 스킬
483
- ├── CLAUDE.md # 프로젝트 가이드 (자동 생성)
484
- ├── AGENTS.md # Codex CLI 가이드 (자동 생성)
475
+ │ │ ├── config.json # Project config
476
+ │ │ ├── constitution.md # Project principles
477
+ │ │ ├── specs/ # SPEC documents
478
+ │ │ ├── features/ # Feature tracking
479
+ │ │ ├── todos/ # P1/P2/P3 issues
480
+ │ │ └── reports/ # Review reports
481
+ │ └── skills/ # Local + external skills
482
+ ├── CLAUDE.md # Project guide (auto-generated)
483
+ ├── AGENTS.md # Codex CLI guide (auto-generated)
485
484
  └── ...
486
485
 
487
- ~/.vibe/config.json # 전역 설정 (인증, 채널, 모델)
488
- ~/.vibe/analytics/ # 텔레메트리 (로컬 JSONL)
489
- │ ├── skill-usage.jsonl # 스킬 사용 기록
490
- │ ├── spans.jsonl # 구조화된 스팬
491
- │ └── decisions.jsonl # 의사결정 추적
486
+ ~/.vibe/config.json # Global config (auth, channels, models)
487
+ ~/.vibe/analytics/ # Telemetry (local JSONL)
488
+ │ ├── skill-usage.jsonl
489
+ │ ├── spans.jsonl
490
+ │ └── decisions.jsonl
492
491
  ~/.claude/
493
492
  ├── vibe/
494
- │ ├── rules/ # 코딩 규칙
495
- │ ├── skills/ # 전역 스킬
496
- │ └── ui-ux-data/ # UI/UX CSV 데이터
497
- ├── commands/ # 슬래시 명령어
498
- └── agents/ # 에이전트 정의 (56개)
493
+ │ ├── rules/ # Coding rules
494
+ │ ├── skills/ # Global skills
495
+ │ └── ui-ux-data/ # UI/UX CSV datasets (48 files)
496
+ ├── commands/ # Slash commands
497
+ └── agents/ # Agent definitions (56)
499
498
  ~/.codex/
500
- └── plugins/vibe/ # Codex 플러그인
499
+ └── plugins/vibe/ # Codex plugin
501
500
  ├── .codex-plugin/plugin.json
502
501
  ├── agents/
503
502
  ├── skills/
@@ -506,45 +505,44 @@ your-project/
506
505
 
507
506
  ---
508
507
 
509
- ## 시스템 아키텍처
508
+ ## Architecture
510
509
 
511
510
  ```mermaid
512
511
  flowchart TD
513
- A["사용자 요청"] --> B["keyword-detector"]
512
+ A["User Request"] --> B["keyword-detector"]
514
513
  B --> C["prompt-dispatcher"]
515
514
  C --> D["SmartRouter"]
516
515
 
517
516
  D --> E["LLMCluster"]
518
- E --> E1["GPT-5.4 (추론)"]
519
- E --> E2["Codex Spark (리뷰)"]
520
- E --> E3["Gemini (리서치)"]
517
+ E --> E1["GPT (Reasoning)"]
518
+ E --> E2["Gemini (Research)"]
521
519
 
522
520
  D --> F["PhasePipeline"]
523
521
  F --> G["SwarmOrchestrator"]
524
522
  G --> H["BackgroundManager"]
525
523
  H --> I["AgentRegistry"]
526
524
 
527
- D --> J["병렬 리뷰"]
528
- J --> J1["12개 Sonnet 리뷰 에이전트"]
529
- J --> J2["/codex:review"]
530
- J1 --> K["3중 교차 검증 → P1/P2/P3"]
525
+ D --> J["Parallel Review"]
526
+ J --> J1["12 Sonnet Review Agents"]
527
+ J --> J2["Codex Review"]
528
+ J1 --> K["Triple Cross-Validation → P1/P2/P3"]
531
529
  J2 --> K
532
- J --> J3["경계면 검증"]
530
+ J --> J3["Boundary Verification"]
533
531
 
534
532
  L["Session RAG"] -.-> M["Decision / Constraint / Goal / Evidence"]
535
- N["VibeSpan"] -.-> O["spans.jsonl (로컬 텔레메트리)"]
536
- P["품질 게이트"] -.-> Q["pre-tool-guard → 차단"]
537
- P -.-> R["code-check → 검증"]
533
+ N["VibeSpan"] -.-> O["spans.jsonl (Local Telemetry)"]
534
+ P["Quality Gate"] -.-> Q["pre-tool-guard → Block"]
535
+ P -.-> R["code-check → Verify"]
538
536
  ```
539
537
 
540
538
  ---
541
539
 
542
- ## 요구사항
540
+ ## Requirements
543
541
 
544
542
  - **Node.js** >= 18.0.0
545
- - **Claude Code** (필수)
546
- - GPT, Gemini (선택 — 멀티 LLM 기능용)
543
+ - **Claude Code** (required)
544
+ - GPT, Gemini (optional — for multi-LLM features)
547
545
 
548
- ## 라이선스
546
+ ## License
549
547
 
550
548
  MIT License - Copyright (c) 2025 Su