@su-record/vibe 2.0.10 → 2.1.0

package/.claude/agents/review/typescript-reviewer.md

@@ -0,0 +1,127 @@
+# TypeScript Reviewer Agent
+
+TypeScript 코드 전문 리뷰 에이전트
+
+## Role
+
+- 타입 안전성 검증
+- ESLint/Prettier 규칙 준수
+- 모던 TS 패턴 제안
+- React/Node.js 베스트 프랙티스
+
+## Model
+
+**Haiku** (inherit) - 빠른 병렬 실행
+
+## Checklist
+
+### Type Safety
+- [ ] `any` 타입 사용 최소화?
+- [ ] 타입 가드 적절히 사용?
+- [ ] `unknown` 대신 `any`?
+- [ ] 유니온 타입 narrowing?
+- [ ] 제네릭 적절히 활용?
+
+### Strict Mode
+- [ ] strictNullChecks 준수?
+- [ ] noImplicitAny 준수?
+- [ ] optional chaining (?.) 활용?
+- [ ] nullish coalescing (??) 활용?
+
+### Modern Patterns
+- [ ] const assertion (as const)?
+- [ ] satisfies 연산자?
+- [ ] Template literal types?
+- [ ] Discriminated unions?
+
+### Error Handling
+- [ ] 에러 타입 정의?
+- [ ] Result/Either 패턴?
+- [ ] async 에러 처리?
+- [ ] 사용자 친화적 에러 메시지?
+
+### Imports/Exports
+- [ ] 배럴 exports 사용?
+- [ ] 순환 의존성 없음?
+- [ ] 타입 전용 import (import type)?
+- [ ] 사용하지 않는 import?
+
+### Performance
+- [ ] 불필요한 리렌더링?
+- [ ] 메모이제이션 (useMemo, useCallback)?
+- [ ] 번들 사이즈 영향?
+- [ ] 동적 import 활용?
+
+## Framework Specific
+
+### React
+- [ ] 훅 규칙 준수 (Rules of Hooks)?
+- [ ] 의존성 배열 완전?
+- [ ] key prop 적절?
+- [ ] 컴포넌트 분리 적절?
+- [ ] 상태 관리 적절?
+
+### Node.js/Express
+- [ ] async 에러 미들웨어?
+- [ ] 입력 검증 (zod, joi)?
+- [ ] 환경 변수 타입 안전?
+- [ ] 로깅 적절?
+
+### Next.js
+- [ ] App Router 패턴?
+- [ ] Server/Client 컴포넌트 구분?
+- [ ] 메타데이터 설정?
+- [ ] 이미지 최적화?
+
+## Output Format
+
+```markdown
+## 📘 TypeScript Review
+
+### 🔴 P1 Critical
+1. **Unsafe Type Assertion**
+   - 📍 Location: src/api/user.ts:42
+   ```typescript
+   // Bad
+   const user = data as User;  // No runtime check
+
+   // Good
+   const user = userSchema.parse(data);  // Runtime validation
+   ```
+
+### 🟡 P2 Important
+2. **Missing Type Guard**
+   - 📍 Location: src/utils/parse.ts:23
+   ```typescript
+   // Before
+   if (response.type === 'success') {
+     // response still has union type
+   }
+
+   // After
+   function isSuccess(r: Response): r is SuccessResponse {
+     return r.type === 'success';
+   }
+   ```
+
+### 🔵 P3 Suggestions
+3. **Use satisfies for Type Checking**
+   - 📍 Location: src/config/routes.ts:5
+   ```typescript
+   // Before
+   const routes: Routes = { ... };
+
+   // After (preserves literal types)
+   const routes = { ... } satisfies Routes;
+   ```
+```
+
+## Usage
+
+```
+Task(
+  model: "haiku",
+  subagent_type: "Explore",
+  prompt: "TypeScript review for [files]. Check type safety, React patterns."
+)
+```

package/.claude/commands/vibe.compound.md

@@ -0,0 +1,261 @@
+---
+description: Auto-document solutions for knowledge compounding
+argument-hint: "solution description (optional)"
+---
+
+# /vibe.compound
+
+**Knowledge Compounding** - Auto-document solved problems to boost future productivity
+
+> "Each solution documented makes future problems easier to solve."
+
+## Usage
+
+```
+/vibe.compound                           # Auto-detect recent solutions
+/vibe.compound "Redis cache invalidation" # Document specific solution
+```
+
+## Auto-Triggers
+
+Automatically suggested when these patterns detected:
+- "it's fixed", "fixed", "solved", "resolved"
+- After PR merge
+- After `/vibe.verify` passes
+
+## Process
+
+### Phase 1: Solution Extraction
+
+Parallel agents analyze the solution:
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  🔍 PARALLEL SOLUTION ANALYSIS                                   │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                 │
+│  Task 1: problem-analyzer                                       │
+│  ├── Identify original problem                                  │
+│  ├── Symptoms and error messages                                │
+│  └── Impact scope                                               │
+│                                                                 │
+│  Task 2: solution-extractor                                     │
+│  ├── Applied fixes                                              │
+│  ├── Key code changes                                           │
+│  └── Configuration changes                                      │
+│                                                                 │
+│  Task 3: root-cause-analyzer                                    │
+│  ├── Root cause identification                                  │
+│  ├── Why it happened                                            │
+│  └── Prevention methods                                         │
+│                                                                 │
+│  Task 4: pattern-recognizer                                     │
+│  ├── Similar problem patterns                                   │
+│  ├── Related tech stack                                         │
+│  └── Search keywords                                            │
+│                                                                 │
+│  Task 5: category-classifier                                    │
+│  ├── Category classification                                    │
+│  ├── Tag generation                                             │
+│  └── Related doc links                                          │
+│                                                                 │
+│  Task 6: code-snippet-extractor                                 │
+│  ├── Before/After code                                          │
+│  ├── Key change highlights                                      │
+│  └── Copy-paste snippets                                        │
+│                                                                 │
+│  Task 7: prevention-advisor                                     │
+│  ├── Prevention checklist                                       │
+│  ├── Suggested linter rules                                     │
+│  └── Test case suggestions                                      │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### Phase 2: Category Classification
+
+```
+.vibe/solutions/
+├── security/           # Security related
+│   ├── sql-injection-prevention.md
+│   └── xss-sanitization.md
+├── performance/        # Performance optimization
+│   ├── n1-query-fix.md
+│   └── redis-cache-invalidation.md
+├── database/           # Database related
+│   ├── migration-rollback.md
+│   └── deadlock-resolution.md
+├── integration/        # External integrations
+│   ├── stripe-webhook-retry.md
+│   └── aws-s3-timeout.md
+├── frontend/           # Frontend issues
+│   ├── react-hydration-mismatch.md
+│   └── infinite-scroll-memory.md
+├── testing/            # Testing related
+│   ├── flaky-test-fix.md
+│   └── mock-timezone.md
+└── deployment/         # Deployment issues
+    ├── docker-layer-cache.md
+    └── k8s-rolling-update.md
+```
+
+### Phase 3: Document Generation
+
+```markdown
+# [Solution] Redis Cache Invalidation
+
+## TL;DR
+Added version suffix to Redis cache key to fix invalidation issue
+
+## Problem
+### Symptoms
+- User profile shows stale data after update
+- Refresh doesn't fix the issue
+
+### Error/Logs
+```
+Cache hit: user:123 (stale data)
+```
+
+### Impact Scope
+- User profile page
+- API: GET /api/users/:id
+
+## Root Cause
+Cache key only used user_id, not invalidated on update
+
+```python
+# Before
+cache_key = f"user:{user_id}"  # No version
+```
+
+## Solution
+### Key Change
+Add updated_at timestamp to cache key
+
+```python
+# After
+cache_key = f"user:{user_id}:v{updated_at.timestamp()}"
+```
+
+### Changed Files
+- src/services/cache.py:42
+- src/api/users.py:78
+
+## Prevention
+- [ ] Always include version/timestamp in cache keys
+- [ ] Add cache invalidation tests
+- [ ] Linter rule: cache_key pattern check
+
+## Related
+- Similar issue: #234 (Session cache)
+- Docs: docs/caching-strategy.md
+- Tags: #redis #cache #invalidation
+
+## Metadata
+- Resolved: 2026-01-11
+- Time spent: 2 hours
+- Difficulty: Medium
+- Reusability: High
+```
+
+### Phase 4: Index Update
+
+Auto-update `.vibe/solutions/index.md`:
+
+```markdown
+# Solution Index
+
+## Recently Added
+| Date | Category | Title | Tags |
+|------|----------|-------|------|
+| 2026-01-11 | performance | Redis cache invalidation | #redis #cache |
+| 2026-01-10 | security | SQL Injection prevention | #sql #security |
+
+## By Category
+- **Security** (5 solutions)
+- **Performance** (8 solutions)
+- **Database** (4 solutions)
+...
+
+## Search Keywords
+- redis → performance/redis-cache-invalidation.md
+- n+1 → performance/n1-query-fix.md
+- sql injection → security/sql-injection-prevention.md
+```
+
+## Auto-Suggestion
+
+When similar problem detected:
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  💡 Similar Solution Found!                                      │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                 │
+│  You're working on: "Cache not updating"                        │
+│                                                                 │
+│  Related solution (85% match):                                  │
+│  📄 .vibe/solutions/performance/redis-cache-invalidation.md     │
+│                                                                 │
+│  Key insight: Add version suffix to cache key                   │
+│                                                                 │
+│  Apply this solution? [Y/n]                                     │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+## Output
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  📚 SOLUTION DOCUMENTED                                          │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                 │
+│  ✅ Created: .vibe/solutions/performance/redis-cache-invalid... │
+│                                                                 │
+│  📊 Knowledge Base Stats:                                        │
+│  ├── Total Solutions: 42                                        │
+│  ├── This Month: 8                                              │
+│  └── Most Used Category: performance                            │
+│                                                                 │
+│  🔗 Similar solutions linked: 2                                  │
+│  🏷️ Tags: #redis #cache #invalidation #performance              │
+│                                                                 │
+│  💡 Prevention rules added to .vibe/rules/                       │
+│                                                                 │
+│  "This solution will help future you (or teammates) save hours" │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+## Integration with Memory
+
+Auto-invoke `vibe_save_memory`:
+
+```json
+{
+  "type": "solution",
+  "category": "performance",
+  "title": "Redis cache invalidation",
+  "keywords": ["redis", "cache", "invalidation"],
+  "file": ".vibe/solutions/performance/redis-cache-invalidation.md"
+}
+```
+
+## Workflow Integration
+
+```
+/vibe.spec → /vibe.run → /vibe.verify → /vibe.compound
+                                              │
+                                              ▼
+                                    .vibe/solutions/
+                                              │
+                                              ▼
+                                    Future problem?
+                                    Auto-suggest!
+```
+
+---
+
+ARGUMENTS: $ARGUMENTS

package/.claude/commands/vibe.e2e.md

@@ -0,0 +1,266 @@
+---
+description: End-to-end testing with Playwright automation
+argument-hint: "test scenario or URL"
+---
+
+# /vibe.e2e
+
+**E2E Test Automation** - Playwright-based browser testing
+
+## Usage
+
+```
+/vibe.e2e                              # Run all E2E tests
+/vibe.e2e "login flow"                 # Test specific scenario
+/vibe.e2e http://localhost:3000/login  # Test specific URL
+/vibe.e2e --visual                     # Visual regression testing
+/vibe.e2e --record                     # Record test video
+```
+
+## Core Features
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  🎭 Playwright E2E Testing                                       │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                 │
+│  ✅ Screenshot Capture - Record UI state                        │
+│  ✅ Console Error Collection - Detect JS errors                 │
+│  ✅ Network Monitoring - Detect API failures                    │
+│  ✅ Visual Regression - Compare screenshots                     │
+│  ✅ Video Recording - Bug reproduction evidence                 │
+│  ✅ Accessibility Check - Detect a11y violations                │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+## Process
+
+### Phase 1: Environment Setup
+
+```bash
+# Check Playwright installation
+npx playwright --version
+
+# Install browsers if needed
+npx playwright install chromium
+```
+
+### Phase 2: Test Scenario Analysis
+
+```
+📋 Scenario Detection
+├── .vibe/features/{feature}.feature → Extract BDD scenarios
+├── .vibe/specs/{feature}.md → Check acceptance criteria
+└── Analyze existing e2e/*.spec.ts
+```
+
+### Phase 3: Test Execution
+
+**Single Page Test:**
+```typescript
+// Auto-generated test
+import { test, expect } from '@playwright/test';
+
+test('login flow', async ({ page }) => {
+  // Navigate
+  await page.goto('http://localhost:3000/login');
+
+  // Screenshot: initial state
+  await page.screenshot({ path: 'screenshots/login-initial.png' });
+
+  // Fill form
+  await page.fill('[data-testid="email"]', 'test@example.com');
+  await page.fill('[data-testid="password"]', 'password123');
+
+  // Submit
+  await page.click('[data-testid="submit"]');
+
+  // Wait for navigation
+  await page.waitForURL('**/dashboard');
+
+  // Screenshot: success state
+  await page.screenshot({ path: 'screenshots/login-success.png' });
+
+  // Assertions
+  await expect(page.locator('h1')).toContainText('Dashboard');
+});
+```
+
+**Console Error Collection:**
+```typescript
+test.beforeEach(async ({ page }) => {
+  // Collect console errors
+  page.on('console', msg => {
+    if (msg.type() === 'error') {
+      console.log(`Console Error: ${msg.text()}`);
+    }
+  });
+
+  // Collect network failures
+  page.on('requestfailed', request => {
+    console.log(`Request failed: ${request.url()}`);
+  });
+});
+```
+
+### Phase 4: Visual Regression (--visual)
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  👁️ Visual Regression Test                                       │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                 │
+│  Comparing screenshots:                                          │
+│                                                                 │
+│  ├── login-page.png                                             │
+│  │   ├── Baseline: .vibe/e2e/baseline/login-page.png           │
+│  │   ├── Current:  .vibe/e2e/current/login-page.png            │
+│  │   └── Diff: ✅ 0.02% (threshold: 1%)                         │
+│  │                                                              │
+│  ├── dashboard.png                                              │
+│  │   ├── Baseline: .vibe/e2e/baseline/dashboard.png            │
+│  │   ├── Current:  .vibe/e2e/current/dashboard.png             │
+│  │   └── Diff: ❌ 5.3% (threshold: 1%)                          │
+│  │       └── .vibe/e2e/diff/dashboard-diff.png                 │
+│  │                                                              │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### Phase 5: Accessibility Check
+
+```typescript
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+test('accessibility check', async ({ page }) => {
+  await page.goto('/login');
+  await injectAxe(page);
+  await checkA11y(page, null, {
+    detailedReport: true,
+    detailedReportOptions: { html: true }
+  });
+});
+```
+
+### Phase 6: Bug Reproduction (Optional)
+
+Link with bug reports:
+
+```
+/vibe.e2e --reproduce "User sees blank page after login"
+
+┌─────────────────────────────────────────────────────────────────┐
+│  🐛 Bug Reproduction Mode                                        │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                 │
+│  Steps executed:                                                │
+│  1. ✅ Navigate to /login                                       │
+│  2. ✅ Enter credentials                                        │
+│  3. ✅ Click login button                                       │
+│  4. ❌ Dashboard shows blank                                    │
+│                                                                 │
+│  Evidence collected:                                             │
+│  ├── 📸 screenshots/bug-step-1.png                              │
+│  ├── 📸 screenshots/bug-step-2.png                              │
+│  ├── 📸 screenshots/bug-step-3.png                              │
+│  ├── 📸 screenshots/bug-step-4-FAIL.png                         │
+│  ├── 🎥 videos/bug-reproduction.webm                            │
+│  └── 📋 logs/console-errors.txt                                 │
+│                                                                 │
+│  Console Errors Found:                                           │
+│  └── TypeError: Cannot read property 'user' of undefined        │
+│      at Dashboard.tsx:42                                        │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+## Output
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  🎭 E2E TEST RESULTS                                             │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                 │
+│  Test Suite: Login Flow                                          │
+│  Duration: 12.3s                                                │
+│  Browser: Chromium 120                                          │
+│                                                                 │
+│  Results:                                                        │
+│  ├── ✅ Passed: 8                                                │
+│  ├── ❌ Failed: 1                                                │
+│  └── ⏭️ Skipped: 0                                               │
+│                                                                 │
+│  Failed Tests:                                                   │
+│  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━   │
+│  ❌ "should show error for invalid password"                    │
+│     Expected: "Invalid password" message                        │
+│     Actual: No error message displayed                          │
+│     📸 Screenshot: .vibe/e2e/failures/invalid-password.png      │
+│                                                                 │
+│  Console Errors: 2                                               │
+│  ├── TypeError at Dashboard.tsx:42                              │
+│  └── 404 at /api/user/preferences                               │
+│                                                                 │
+│  Accessibility Issues: 3                                         │
+│  ├── [serious] Form input missing label                         │
+│  ├── [moderate] Color contrast insufficient                     │
+│  └── [minor] Missing skip link                                  │
+│                                                                 │
+│  Artifacts:                                                      │
+│  ├── 📸 Screenshots: .vibe/e2e/screenshots/                     │
+│  ├── 🎥 Video: .vibe/e2e/videos/                                │
+│  └── 📋 Report: .vibe/e2e/report.html                           │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+## Configuration
+
+`.vibe/e2e/config.json`:
+
+```json
+{
+  "baseURL": "http://localhost:3000",
+  "browsers": ["chromium"],
+  "viewport": { "width": 1280, "height": 720 },
+  "video": "retain-on-failure",
+  "screenshot": "only-on-failure",
+  "trace": "retain-on-failure",
+  "visualRegression": {
+    "enabled": true,
+    "threshold": 0.01
+  },
+  "accessibility": {
+    "enabled": true,
+    "rules": ["wcag2aa"]
+  }
+}
+```
+
+## Integration with Review
+
+Auto-suggest after `/vibe.review`:
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  💡 E2E Test Recommended                                         │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                 │
+│  UI changes detected in this PR:                                 │
+│  - src/components/LoginForm.tsx                                 │
+│  - src/pages/Dashboard.tsx                                      │
+│                                                                 │
+│  Run E2E tests? /vibe.e2e "login flow"                          │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+## Related Commands
+
+- `/vibe.review` - Code review
+- `/vibe.verify` - SPEC verification
+- `/vibe.compound` - Document test results
+
+---
+
+ARGUMENTS: $ARGUMENTS