@su-record/vibe 2.6.34 → 2.6.41

package/agents/ui/ui-stack-implementer.md

@@ -0,0 +1,68 @@
+# UI Stack Implementer Agent
+
+<!-- RUN Phase: Framework-specific component implementation guide -->
+
+## Role
+
+- Provide implementation guidelines for detected tech stack
+- Map design system to framework-specific patterns
+- Recommend component libraries, hooks, state management
+
+## Model
+
+**Haiku** (inherit) - Fast implementation guidance
+
+## Phase
+
+**RUN** (Before Phase 1) - Always executed
+
+## MCP Tools
+
+- `core_ui_search` - Search framework patterns, react-performance
+- `core_ui_stack_search` - Stack-specific guidelines (React, Next.js, Vue, Svelte, etc.)
+
+## Process
+
+1. Detect project tech stack from package.json or project files
+2. Load MASTER.md from `.claude/vibe/design-system/{project}/MASTER.md` if exists
+3. Use `core_ui_stack_search` with detected stack for framework patterns
+4. Use `core_ui_search` with domain `react` for performance patterns (if React/Next.js)
+5. Generate implementation guidelines mapping design system to framework
+
+## Supported Stacks
+
+React, Next.js, Vue, Nuxt.js, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind/HTML, shadcn/ui, Nuxt UI, Jetpack Compose
+
+## Output Format
+
+```markdown
+## Implementation Guide: {stack}
+
+### Component Structure
+- Recommended: {pattern} (e.g., Atomic Design, Feature-based)
+- File naming: {convention}
+
+### Design System Integration
+- CSS Variables: Import from MASTER.md
+- Theme provider: {recommendation}
+- Dark mode: {approach}
+
+### Key Components
+| Component | Library | Pattern |
+|-----------|---------|---------|
+| Button | shadcn/ui | Variant props |
+| Modal | Radix UI | Portal + Focus trap |
+| ...
+
+### Performance
+- Rendering: {strategy}
+- State: {management}
+- Data fetching: {approach}
+```
+
+## Success Criteria
+
+- Stack correctly detected
+- MASTER.md referenced for design tokens
+- Framework-specific best practices included
+- Performance recommendations provided

package/agents/ui/ux-compliance-reviewer.md

@@ -0,0 +1,81 @@
+# UX Compliance Reviewer Agent
+
+<!-- REVIEW Phase: UX guideline compliance verification -->
+
+## Role
+
+- Review UI files for UX guideline compliance
+- Check against 99 UX guidelines from knowledge base
+- Verify interaction states, navigation, feedback patterns
+
+## Model
+
+**Haiku** (inherit) - Fast parallel review
+
+## Phase
+
+**REVIEW** (Phase 2) - Triggered when UI files change
+
+## MCP Tools
+
+- `core_ui_search` - Search `ux` and `web` domains for guideline verification
+
+## Process
+
+1. Receive list of changed UI files from git diff
+2. Read each changed file
+3. Use `core_ui_search` with domain `ux` for relevant guidelines
+4. Use `core_ui_search` with domain `web` for web interface standards
+5. Check compliance against retrieved guidelines
+6. Return findings with severity and remediation
+
+## Checklist
+
+### Interaction States
+- [ ] Loading state for async operations?
+- [ ] Error state with user-friendly messages?
+- [ ] Empty state for lists/collections?
+- [ ] Success feedback (toast, redirect, confirmation)?
+
+### Navigation
+- [ ] Breadcrumbs or back navigation?
+- [ ] Active state indicators?
+- [ ] Consistent navigation patterns?
+
+### User Feedback
+- [ ] Progress indicators for multi-step flows?
+- [ ] Confirmation for destructive actions?
+- [ ] Undo capability for reversible actions?
+
+### Forms
+- [ ] Inline validation with clear error messages?
+- [ ] Autofocus on first field?
+- [ ] Tab order logical?
+
+## Output Format
+
+```markdown
+## UX Compliance Review
+
+### Summary
+- Compliance: {N}%
+- Issues: {P1: N, P2: N, P3: N}
+
+### Findings
+
+#### P1 (Critical)
+- **[UX-001]** {issue}
+  - File: {path}:{line}
+  - Guideline: {guideline from core_ui_search}
+  - Recommendation: {fix}
+
+#### P2 (Important)
+- **[UX-002]** {issue}
+  ...
+```
+
+## Success Criteria
+
+- All changed UI files reviewed
+- Findings include specific guideline references
+- P1 issues clearly identified for auto-fix

package/agents/ui-previewer.md

@@ -97,34 +97,30 @@ vibe gemini status
 
 Or check config file: `~/.config/vibe/gemini.json`
 
-#### If Gemini Enabled: Generate UI Image
+#### If Gemini Enabled: Generate UI Image + Code
 
-Use Gemini Image API to generate actual UI mockup:
-
-**Prompt template for Gemini:**
+##### A. UI Mockup Image Generation
 
+```bash
+node "[LLM_SCRIPT]" gemini image "Modern UI mockup: [UI Description from step 2]. Clean design, [colors/typography if available], mobile-first responsive layout" --output "./ui-preview.png"
 ```
-Generate a modern UI mockup image for:
 
-[UI Description from step 2]
+##### B. UI Code Generation (from design files)
 
-Style requirements:
-- Clean, modern design
-- [Colors from design tokens if available]
-- [Typography from style guide if available]
-- Mobile-first responsive layout
-- Include all specified components
+When design files (image/HTML/folder) are provided, use Gemini to generate production-ready component code:
 
-Output: High-quality UI mockup image (1280x720 or similar)
+```bash
+node "[LLM_SCRIPT]" gemini orchestrate "You are a UI code generator. Analyze the provided design and generate production-ready React TypeScript components with Tailwind CSS. Output complete component code with proper types, responsive layout, and accessibility attributes."
 ```
 
-**Execution:**
+Pass the design context (file contents, extracted colors, layout structure from step 2) as the user prompt via stdin or arguments.
 
-```bash
-node "$(node -p "process.env.APPDATA || require('os').homedir() + '/.config'")/vibe/hooks/scripts/llm-orchestrate.js" gemini image "[analyzed UI description]" --output "./ui-preview.png"
-```
+**When to use each:**
 
-**Output location:** `./ui-preview-{timestamp}.png`
+| Input | Image (Step A) | Code (Step B) |
+| ----- | -------------- | ------------- |
+| Text description | Generate mockup | Skip |
+| Image/HTML/Folder | Generate mockup | Generate component code |
 
 #### If Gemini Disabled: ASCII Art Fallback
 

package/commands/vibe.analyze.md

@@ -25,6 +25,8 @@ Analyze project or specific feature/module.
 
 ---
 
+> **⏱️ Timer**: Call `getCurrentTime` tool at the START. Record the result as `{start_time}`.
+
 ## Mode 1: Feature/Module Analysis (`/vibe.analyze "feature-name"`)
 
 ### Goal
@@ -55,25 +57,40 @@ Read `CLAUDE.md`, `package.json`, `pyproject.toml`, etc. to identify tech stack:
 - React/Next.js: `src/components/`, `src/pages/`, `src/hooks/`
 - Flutter: `lib/screens/`, `lib/services/`, `lib/providers/`
 
-#### 3. Explore Related Code (Parallel via Orchestrator)
+#### 3. Explore Related Code (Parallel Sub-Agents)
 
-**Exploration strategy using orchestrator:**
-```bash
-# Discover available agents
-node -e "import('@su-record/vibe/orchestrator').then(o => o.listAgents().then(r => console.log(r.content[0].text)))"
-
-# Run parallel exploration agents
-node -e "import('@su-record/vibe/orchestrator').then(async o => {
-  const results = await Promise.all([
-    o.runAgent('Find all [FEATURE] related API endpoints', 'api-explorer'),
-    o.runAgent('Find all [FEATURE] related services/logic', 'service-explorer'),
-    o.runAgent('Find all [FEATURE] related data models', 'model-explorer')
-  ]);
-  console.log('Exploration agents started');
-})"
+**🚨 MANDATORY: 3개 이상의 Task를 병렬로 실행하세요. 순차 실행은 위반입니다.**
+
+**병렬 탐색 패턴 (한 메시지에 모든 Task 호출):**
+
+```text
+# 3개 explorer 에이전트 병렬 실행 (single message, multiple tool calls)
+Task(subagent_type="explorer-low", model="haiku",
+  prompt="Find all [FEATURE] related API endpoints in this project. List file paths, HTTP methods, routes, and auth requirements.")
+
+Task(subagent_type="explorer-low", model="haiku",
+  prompt="Find all [FEATURE] related services, business logic, and utility functions. Map dependencies between them.")
+
+Task(subagent_type="explorer-low", model="haiku",
+  prompt="Find all [FEATURE] related data models, schemas, and database queries. Document relationships and key fields.")
 ```
 
-**Alternative (direct tools):**
+**추가 탐색 (프로젝트 규모에 따라):**
+
+```text
+# 대규모 프로젝트 (6+ 관련 파일) — 추가 2개 병렬 실행
+Task(subagent_type="explorer-low", model="haiku",
+  prompt="Find all test files related to [FEATURE]. Identify tested vs untested paths.")
+
+Task(subagent_type="explorer-low", model="haiku",
+  prompt="Analyze [FEATURE] configuration, environment variables, and external integrations.")
+```
+
+**결과 종합:**
+- 모든 Task 완료 후 결과를 종합하여 Flow Analysis (Step 4) 진행
+- 탐색 결과 기반으로 관련 파일을 직접 Read하여 상세 분석
+
+**Fallback (direct tools — 소규모 프로젝트):**
 1. **Glob** to collect related file list
 2. **Grep** to locate code by keyword
 3. **Read** to analyze key files in detail
@@ -130,7 +147,7 @@ node -e "import('@su-record/vibe/orchestrator').then(async o => {
 #### 6. Complete & Next Action
 
 After analysis:
-1. Output analysis summary
+1. Output analysis summary (include `⏱️ Started: {start_time}` and `⏱️ Completed: {getCurrentTime 결과}`)
 2. **Ask user to choose workflow** when development is requested:
 
 ```
@@ -209,7 +226,7 @@ Which approach would you like to use?
 2. Apply lodash security patch
 ```
 
-## Vibe Tools (Semantic Analysis)
+## Core Tools (Semantic Analysis)
 
 ### Tool Invocation
 

package/commands/vibe.reason.md

@@ -13,6 +13,8 @@ Apply 9-step reasoning framework to complex problems.
 /vibe.reason "problem description"
 ```
 
+> **⏱️ Timer**: Call `getCurrentTime` tool at the START. Record the result as `{start_time}`.
+
 ## When to Use
 
 1. **Complex bug debugging** - Root cause unclear, need systematic hypothesis verification
@@ -77,6 +79,8 @@ Apply 9-step reasoning framework to complex problems.
 **Problem**: [problem description]
 **Context**: [relevant information]
 **Steps Applied**: 9/9
+**⏱️ Started**: {start_time}
+**⏱️ Completed**: {getCurrentTime 결과}
 
 ---
 
@@ -178,7 +182,7 @@ AI: Analyzing with 9-step reasoning framework...
    - Verify hypotheses in order of likelihood
    - Feedback each verification result
 
-## Vibe Tools (Reasoning Support)
+## Core Tools (Reasoning Support)
 
 ### Tool Invocation
 

package/commands/vibe.review.md

@@ -18,6 +18,8 @@ argument-hint: "PR number, branch name, or file path"
 /vibe.review --race security         # Race mode for specific review type
 ```
 
+> **⏱️ Timer**: Call `getCurrentTime` tool at the START. Record the result as `{start_time}`.
+
 ## Race Mode (v2.6.9)
 
 **Multi-LLM competitive review** - Same review task runs on GPT + Gemini in parallel, results are cross-validated.
@@ -70,8 +72,8 @@ security-review:
 
 ### Cross-Validated Issues
 
-**Summary**: 4 issues (P1: 1, P2: 2, P3: 1)
-**Consensus Rate**: 75%
+**Summary**: 3 issues (P1: 1, P2: 2)
+**Consensus Rate**: 67%
 
 #### 🔴 P1 - SQL Injection in user query
 
@@ -98,19 +100,24 @@ security-review:
 
 ### Tool Invocation (Race Mode - GPT + Gemini in parallel via Bash)
 
-**🚨 Use stdin pipe to avoid CLI argument length limits on Windows.**
+**🚨 Use --input file to avoid CLI argument length limits and Windows pipe issues.**
 
 1. Save code to review into `[SCRATCHPAD]/review-code.txt` (using Write tool)
-2. Run GPT + Gemini in PARALLEL (two Bash tool calls at once):
+2. Write JSON input file `[SCRATCHPAD]/review-input.json` (using Write tool):
+   - `{"prompt": "Review this code for [REVIEW_TYPE]. Return JSON: {issues: [{id, title, description, severity, suggestion}]}. Code: [CODE_CONTENT]"}`
+   - Where `[CODE_CONTENT]` is the code text (properly JSON-escaped inside the prompt string)
+3. Resolve script path (once per session): `node -e "console.log(require('path').join(process.env.APPDATA || require('os').homedir() + '/.config', 'vibe/hooks/scripts/llm-orchestrate.js'))"`
+   - Save output as `[LLM_SCRIPT]`
+4. Run GPT + Gemini in PARALLEL (two Bash tool calls at once):
 
 ```bash
 # GPT review (Bash tool call 1)
-node -e "const fs=require('fs');const p=JSON.stringify({prompt:'Review this code for [REVIEW_TYPE]. Return JSON: {issues: [{id, title, description, severity, suggestion}]}. Code: '+fs.readFileSync('[SCRATCHPAD]/review-code.txt','utf8')});process.stdout.write(p)" | node "$(node -p "process.env.APPDATA || require('os').homedir() + '/.config'")/vibe/hooks/scripts/llm-orchestrate.js" gpt orchestrate-json
+node "[LLM_SCRIPT]" gpt orchestrate-json --input "[SCRATCHPAD]/review-input.json"
 ```
 
 ```bash
 # Gemini review (Bash tool call 2 - run in parallel)
-node -e "const fs=require('fs');const p=JSON.stringify({prompt:'Review this code for [REVIEW_TYPE]. Return JSON: {issues: [{id, title, description, severity, suggestion}]}. Code: '+fs.readFileSync('[SCRATCHPAD]/review-code.txt','utf8')});process.stdout.write(p)" | node "$(node -p "process.env.APPDATA || require('os').homedir() + '/.config'")/vibe/hooks/scripts/llm-orchestrate.js" gemini orchestrate-json
+node "[LLM_SCRIPT]" gemini orchestrate-json --input "[SCRATCHPAD]/review-input.json"
 ```
 
 ## Priority System
@@ -169,6 +176,39 @@ node -e "import('@su-record/vibe/orchestrator').then(o => o.review(['src/api/use
 | rails-reviewer | Gemfile has rails |
 | react-reviewer | package.json has react |
 
+### Phase 2.5: UI/UX Review Agents (Auto-triggered)
+
+> **활성화 조건**: 변경된 파일 중 UI 파일 존재 (`.tsx`, `.jsx`, `.vue`, `.svelte`, `.html`, `.css`, `.scss`)
+> **비활성화**: `.claude/vibe/config.json`에 `"uiUxAnalysis": false` 설정
+
+**기존 12+ 리뷰 에이전트와 병렬 실행:**
+
+| Agent | Role | Output |
+|-------|------|--------|
+| ⑥ ux-compliance-reviewer | UX 가이드라인 준수 검증 | P1/P2/P3 findings |
+| ⑦ ui-a11y-auditor | WCAG 2.1 AA 접근성 감사 | P1/P2/P3 findings |
+| ⑧ ui-antipattern-detector | UI 안티패턴 + 디자인 시스템 일관성 | P1/P2/P3 findings |
+
+**실행 방법 — 기존 Phase 2 에이전트와 병렬 실행:**
+
+```text
+# ⑥ UX 준수 검증 (Haiku)
+Task(subagent_type="ux-compliance-reviewer",
+  prompt="Review UI files for UX guideline compliance: {changed_ui_files}. Use core_ui_search against ux-guidelines and web-interface domains.")
+
+# ⑦ 접근성 감사 (Haiku)
+Task(subagent_type="ui-a11y-auditor",
+  prompt="Audit UI files for WCAG 2.1 AA compliance: {changed_ui_files}.")
+
+# ⑧ 안티패턴 검출 (Haiku)
+Task(subagent_type="ui-antipattern-detector",
+  prompt="Detect UI anti-patterns in: {changed_ui_files}. Check against MASTER.md if exists at .claude/vibe/design-system/{project}/MASTER.md.")
+```
+
+**findings 통합**: ⑥⑦⑧ findings를 기존 findings[]와 병합 → P1/P2/P3 통합 정렬
+
+**⑦ Critical finding 에스컬레이션**: ui-a11y-auditor의 P1 finding은 Review Debate Team(Phase 4.5)에 자동 포함
+
 ### Phase 3: Deep Analysis
 
 After agent results:
@@ -196,6 +236,96 @@ P3 NICE-TO-HAVE (Enhancement) - N issues
 4. [STYLE] Consider extracting helper function
 ```
 
+### Phase 4.5: Agent Teams — Review Debate
+
+> **Agent Teams**: 개별 리뷰어의 발견을 팀으로 토론하여 우선순위를 검증하고 오탐을 제거합니다.
+> 설정: `CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1` + `teammateMode: in-process` (`~/.claude/settings.json` 전역 — postinstall 자동 설정)
+
+**팀 구성:**
+
+| 팀원 | 역할 |
+|------|------|
+| security-reviewer (리더) | P1/P2 이슈 종합, 보안 이슈 최종 판정, 합의 주도 |
+| architecture-reviewer | 구조적 영향 평가, 숨겨진 결합도 식별 |
+| performance-reviewer | 성능 영향 평가, 부하 시나리오 검증 |
+| simplicity-reviewer | 과잉 설계 지적, 더 단순한 대안 제시 |
+
+**실행 순서:**
+
+1. `TeamCreate(team_name="review-debate-{feature}")` — 팀 + 공유 태스크 리스트 생성
+2. 4개 팀원 병렬 생성 — 각각 `Task(team_name=..., name=..., subagent_type=...)` 으로 spawn
+3. 팀원들이 공유 TaskList에서 이슈를 claim하고, SendMessage로 교차 검증
+4. 리더(security-reviewer)가 팀 합의 결과 종합 → 검증된 P1/P2 목록 출력
+5. 모든 팀원 shutdown_request → TeamDelete로 정리
+
+**팀원 spawn 패턴:**
+
+```text
+TeamCreate(team_name="review-debate-{feature}", description="Review debate for {feature}")
+
+# 4개 병렬 spawn
+Task(team_name="review-debate-{feature}", name="security-reviewer", subagent_type="security-reviewer",
+  prompt="리뷰 토론 팀 리더. Phase 2에서 발견된 P1/P2 이슈를 팀과 함께 검증하세요.
+  Phase 2 결과: {phase2_findings}
+  역할: 보안 이슈 최종 판정, 팀원 간 우선순위 충돌 해결, 최종 합의 요약 작성.
+  TaskList를 확인하고 이슈를 claim하세요. 각 이슈에 대해 팀원에게 SendMessage로 검증을 요청하세요.
+  모든 이슈 검증 완료 후 최종 합의 결과를 작성하세요.")
+
+Task(team_name="review-debate-{feature}", name="architecture-reviewer", subagent_type="architecture-reviewer",
+  prompt="리뷰 토론 팀 아키텍처 담당. Phase 2 결과: {phase2_findings}
+  역할: 각 이슈의 구조적 영향 평가, 숨겨진 결합도/의존성 식별.
+  아키텍처 관점에서 우선순위 변경이 필요하면 security-reviewer에게 SendMessage로 알리세요.
+  TaskList에서 아키텍처 관련 이슈를 claim하세요.")
+
+Task(team_name="review-debate-{feature}", name="performance-reviewer", subagent_type="performance-reviewer",
+  prompt="리뷰 토론 팀 성능 담당. Phase 2 결과: {phase2_findings}
+  역할: 성능 영향 평가, 부하 시 cascading failure 가능성 검증.
+  성능 관점에서 P2→P1 승격이 필요하면 security-reviewer에게 SendMessage로 알리세요.
+  TaskList에서 성능 관련 이슈를 claim하세요.")
+
+Task(team_name="review-debate-{feature}", name="simplicity-reviewer", subagent_type="simplicity-reviewer",
+  prompt="리뷰 토론 팀 복잡도 담당. Phase 2 결과: {phase2_findings}
+  역할: 과잉 진단(오탐) 식별, 더 단순한 수정 방안 제시.
+  오탐이나 P1→P2 강등이 필요하면 security-reviewer에게 SendMessage로 알리세요.
+  TaskList에서 복잡도/단순화 관련 이슈를 claim하세요.")
+```
+
+**팀원 간 통신 예시:**
+
+```text
+architecture-reviewer → security-reviewer: "Unbounded query는 부하 시 cascading failure 가능. P2→P1 승격 제안"
+simplicity-reviewer → security-reviewer: "CSRF on read-only endpoint는 side effect 없음. P1→P2 강등 제안"
+performance-reviewer → architecture-reviewer: "N+1 query가 현재 데이터 규모에서는 영향 없으나 확장 시 문제. 의견?"
+security-reviewer → broadcast: "최종 합의: SQL Injection P1 유지, Unbounded query P1 승격, CSRF P2 강등, Circular dep 오탐 제거"
+```
+
+**토론 결과 예시:**
+
+```
+🤝 REVIEW DEBATE RESULTS
+
+Team Consensus (4 reviewers):
+
+✅ Validated P1 (unanimous):
+  1. [SECURITY] SQL Injection — 4/4 agree critical
+
+⬆️ Upgraded P2→P1 (debate result):
+  2. [PERF] Unbounded query — architecture-reviewer pointed out
+     cascading failure risk under load → team agreed P1
+
+⬇️ Downgraded P1→P2 (debate result):
+  3. [SECURITY] CSRF on read-only endpoint — simplicity-reviewer
+     noted endpoint has no side effects → team agreed P2
+
+❌ Removed (false positive):
+  4. [ARCH] "Circular dependency" — architecture-reviewer confirmed
+     this is intentional bi-directional reference, not a cycle
+
+🆕 New findings (team discussion):
+  5. [DATA] Race condition in concurrent updates — emerged from
+     security + performance discussion
+```
+
 ### Phase 5: Auto-Fix (P1/P2)
 
 **Auto-fixable issues are resolved immediately:**
@@ -244,7 +374,9 @@ Examples:
 CODE REVIEW SUMMARY
 PR #123: Add user authentication
 
-Reviewers: 13 agents | Duration: 45s
+Reviewers: 13 agents
+⏱️ Started: {start_time}
+⏱️ Completed: {getCurrentTime 결과}
 
 Score: 92/100 (Good) ← Score after auto-fix
 
@@ -293,7 +425,7 @@ Which approach would you like to proceed with?
 - If user chooses VIBE → wait for `/vibe.spec` command
 - If user chooses Plan Mode → proceed with EnterPlanMode
 
-## Vibe Tools (Code Analysis)
+## Core Tools (Code Analysis)
 
 ### Tool Invocation