@su-record/vibe 2.1.0 → 2.2.1

package/.claude/commands/vibe.diagram.md

@@ -1,178 +0,0 @@
----
-description: Generate diagrams (architecture, ERD, flowchart)
-argument-hint: --er or --flow (optional)
----
-
-# /vibe.diagram
-
-Generate diagrams (architecture, ERD, flowchart).
-
-## Usage
-
-```
-/vibe.diagram
-/vibe.diagram --er
-/vibe.diagram --flow
-```
-
-## Process
-
-### 1. Determine Diagram Type
-
-- **Default** (`/vibe.diagram`): Architecture diagram
-- **--er**: ERD (Entity-Relationship Diagram)
-- **--flow**: Flowchart (main processes)
-
-### 2. Project Analysis
-
-#### Architecture Diagram
-- Understand project structure (folder structure)
-- Identify major modules and layers
-- Analyze dependency relationships
-
-#### ERD
-- Find database schema files
-  - `backend/models/`
-  - `migrations/`
-  - `schema.sql`
-- Identify table relationships
-
-#### Flowchart
-- Main business logic flows
-- User action → System response
-
-### 3. Generate Mermaid Code
-
-Generate diagram as ASCII art or Mermaid code:
-
-#### Architecture Diagram (Mermaid)
-
-```mermaid
-graph TB
-    Client[React Frontend]
-    API[FastAPI Backend]
-    DB[(PostgreSQL)]
-    Cache[(Redis)]
-
-    Client -->|HTTP| API
-    API -->|Query| DB
-    API -->|Cache| Cache
-```
-
-#### ERD (Mermaid)
-
-```mermaid
-erDiagram
-    USER ||--o{ FEED : creates
-    USER ||--o{ FOLLOW : follows
-    FEED }o--|| RESTAURANT : references
-
-    USER {
-        uuid id PK
-        string email
-        int tier
-    }
-    FEED {
-        uuid id PK
-        uuid user_id FK
-        uuid restaurant_id FK
-        text content
-    }
-```
-
-#### Flowchart (Mermaid)
-
-```mermaid
-flowchart TD
-    Start([User writes feed])
-    GPS{GPS Auth}
-    Vision{Vision API Verify}
-    OCR{OCR Auth}
-    Save[Save Feed]
-
-    Start --> GPS
-    GPS -->|Within 50m| Vision
-    GPS -->|Out of range| Fail
-    Vision -->|Food detected| OCR
-    Vision -->|Failed| Fail
-    OCR -->|Optional| Save
-    Save --> End([Complete])
-```
-
-### 4. Rendering Guide
-
-Guide on how to render generated Mermaid code:
-
-- **GitHub**: Paste in `.md` file (auto-renders)
-- **VSCode**: Install Mermaid extension
-- **Online**: https://mermaid.live/
-
-## Example
-
-```
-User: /vibe.diagram --er
-
-Claude: Generating ERD...
-
-Analyzing project...
-- Database schema found: backend/models/
-- Tables: 15
-- Key relationships: USER, FEED, RESTAURANT
-
-✅ ERD generation complete!
-
-```mermaid
-erDiagram
-    USER ||--o{ FEED : creates
-    USER ||--o{ FOLLOW : "follows/followed_by"
-    USER ||--o{ BOOKMARK : bookmarks
-    FEED }o--|| RESTAURANT : references
-    FEED ||--o{ COMMENT : has
-    FEED ||--o{ LIKE : has
-
-    USER {
-        uuid id PK
-        string email UK
-        string username UK
-        int tier
-        int points
-        timestamp created_at
-    }
-
-    FEED {
-        uuid id PK
-        uuid user_id FK
-        uuid restaurant_id FK
-        text content
-        geography location
-        boolean ocr_verified
-        timestamp created_at
-    }
-
-    RESTAURANT {
-        uuid id PK
-        string name
-        geography location
-        string category
-        timestamp created_at
-    }
-```
-
-**Diagram save location:**
-  .vibe/diagrams/erd-2025-11-17.md
-
-**Rendering options:**
-  1. Push to GitHub (auto-renders)
-  2. Use Mermaid extension in VSCode
-  3. View at https://mermaid.live/
-```
-
-## Notes
-
-- Mermaid is supported in GitHub, GitLab, VSCode, etc.
-- Complex diagrams may need manual adjustments
-- Generated diagrams are saved in `.vibe/diagrams/` folder
-
----
-
-ARGUMENTS: $ARGUMENTS

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

@@ -1,266 +0,0 @@
----
-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