@su-record/vibe 2.16.3 → 3.0.0

package/agents/ui-previewer.md

@@ -1,258 +0,0 @@
----
-description: Preview UI with Gemini image or ASCII art fallback
-argument-hint: "UI description or design folder path"
----
-
-# /vibe.ui
-
-Preview UI from description or design guide folder.
-
-- **Gemini enabled**: Generate actual UI image
-- **Gemini disabled**: ASCII art fallback
-
-## Usage
-
-```
-/vibe.ui "login page"                    # Text description
-/vibe.ui "dashboard" --layout grid       # With layout option
-/vibe.ui ./design/                       # Design guide folder
-/vibe.ui ./mockups/login.html            # Single HTML file
-```
-
-## Process
-
-### 0. Detect Input Type
-
-First, determine if input is:
-
-- **Text description**: Generate UI from description
-- **Folder path**: Read design files and generate UI
-- **File path**: Read single file and generate UI
-
-**Detection logic:**
-
-```
-if (input starts with "./" or "/" or contains "/" or "\") → path
-else → text description
-```
-
-### 1. If Folder/File Path: Read Design Files
-
-**Supported file formats:**
-
-| Format | Purpose | How to read |
-| ------ | ------- | ----------- |
-| `*.html` | HTML mockups/prototypes | Read and parse structure |
-| `*.md` | Design guide documents | Read content |
-| `*.json` | Design tokens, theme config | Parse JSON |
-| `*.css` / `*.scss` | Style variables, colors | Extract variables |
-| `*.png` / `*.jpg` / `*.webp` | UI screenshots, mockups | **Use Read tool** (multimodal) |
-| `*.svg` | Icons, vector graphics | Read as XML |
-| `*.figma.json` | Figma export | Parse components |
-
-**Reading images:**
-
-Claude can read images using the Read tool. When encountering image files:
-
-1. Use Read tool to view the image
-2. Analyze UI structure, colors, layout from the image
-3. Extract component hierarchy
-
-**Folder scanning priority:**
-
-1. `*.html` files first (main structure)
-2. `*.png` / `*.jpg` images (visual reference)
-3. `*.json` (design tokens)
-4. `*.css` / `*.scss` (styles)
-5. `*.md` (documentation)
-
-**Example folder structure:**
-
-```
-design/
-├── mockup.html          # Main HTML mockup
-├── screenshot.png       # UI screenshot
-├── tokens.json          # Design tokens
-├── variables.css        # CSS variables
-└── style-guide.md       # Documentation
-```
-
-### 2. Analyze UI (from description or files)
-
-Analyze the UI structure:
-
-- Page/component name
-- Required UI elements (buttons, inputs, cards, etc.)
-- Layout structure (header-footer, sidebar, grid, etc.)
-- **Colors and typography** (from design tokens/CSS)
-- **Component hierarchy** (from HTML/images)
-
-### 3. Check Gemini Status and Generate
-
-**Check Gemini authentication:**
-
-```bash
-vibe gemini status
-```
-
-#### If Gemini Enabled: Generate UI Image + Code
-
-##### 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"
-```
-
-##### B. UI Code Generation (from design files)
-
-When design files (image/HTML/folder) are provided, use Gemini to generate production-ready component code:
-
-```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."
-```
-
-Pass the design context (file contents, extracted colors, layout structure from step 2) as the user prompt via stdin or arguments.
-
-**When to use each:**
-
-| 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
-
-Generate ASCII art based on the UI description:
-
-**Input format:**
-
-- Page name
-- Layout type (centered, sidebar, grid, header-footer)
-- Components list (type, label, position)
-
-**Example ASCII output:**
-
-```
-┌─────────────────────────────────────────┐
-│               Welcome                    │
-├─────────────────────────────────────────┤
-│                                          │
-│         ┌─────────────────────┐          │
-│  Email: │                     │          │
-│         └─────────────────────┘          │
-│                                          │
-│         ┌─────────────────────┐          │
-│  Pass:  │                     │          │
-│         └─────────────────────┘          │
-│                                          │
-│         ┌─────────────────────┐          │
-│         │       Login         │          │
-│         └─────────────────────┘          │
-│                                          │
-└─────────────────────────────────────────┘
-```
-
-### 4. Generate Component List
-
-Suggest list of components needed for UI:
-
-**Required Components:**
-
-- `Header.tsx` - Header ("Welcome")
-- `LoginForm.tsx` - Form container
-- `Input.tsx` - Reusable input field
-- `Button.tsx` - Login button
-
-**Expected File Structure:**
-
-```
-src/
-├── components/
-│   ├── common/
-│   │   ├── Input.tsx
-│   │   └── Button.tsx
-│   └── auth/
-│       ├── Header.tsx
-│       └── LoginForm.tsx
-└── pages/
-    └── LoginPage.tsx
-```
-
-## Example (with Gemini)
-
-```
-User: /vibe.ui ./design/dashboard/
-
-Claude: Reading design folder...
-  - Found: mockup.png, tokens.json, style-guide.md
-
-Analyzing design files...
-  - Layout: Sidebar + Main content
-  - Colors: Primary #2F6BFF, Background #F5F5F5
-  - Components: Header, Sidebar, 3 StatCards, Footer
-
-Generating UI mockup with Gemini...
-
-✅ UI Preview generated: ./ui-preview-1706234567.png
-
-[Image displayed]
-
-**Component Breakdown:**
-1. Header (logo, user menu)
-2. Sidebar (navigation)
-3. StatsCard (reusable card)
-4. Footer (copyright, links)
-5. DashboardLayout (overall layout)
-
-Next step: /vibe.spec "dashboard page"
-```
-
-## Example (ASCII Fallback)
-
-```
-User: /vibe.ui "Dashboard page - header, sidebar, main content (3 cards), footer"
-
-Claude: Gemini not configured. Using ASCII preview...
-
-┌────────────────────────────────────────────────────────┐
-│  [Logo]  Dashboard                    [User] [Logout]  │
-├────────┬───────────────────────────────────────────────┤
-│        │                                               │
-│ Home   │  ┌──────────┐ ┌──────────┐ ┌──────────┐      │
-│ Stats  │  │  Card 1  │ │  Card 2  │ │  Card 3  │      │
-│ Users  │  │          │ │          │ │          │      │
-│ Settings│  │  100     │ │  200     │ │  50      │      │
-│        │  └──────────┘ └──────────┘ └──────────┘      │
-│        │                                               │
-│        │                                               │
-├────────┴───────────────────────────────────────────────┤
-│  © 2025 Company                    Privacy | Terms    │
-└────────────────────────────────────────────────────────┘
-
-**Required Components:**
-1. Header (logo, user menu)
-2. Sidebar (navigation)
-3. StatsCard (reusable card)
-4. Footer (copyright, links)
-5. DashboardLayout (overall layout)
-
-**Layout Structure:**
-- Layout: sidebar (fixed left)
-- Main: grid (3 columns)
-- Responsive: Changes to 1 column on mobile
-
-💡 Tip: Run `vibe gemini key <key>` for actual UI image generation
-
-Next step: /vibe.spec "dashboard page"
-```
-
-## Notes
-
-- For complex UI, request in multiple parts
-- Layout options: `sidebar`, `header-footer`, `grid`, `centered`, `split`
-- Gemini generates high-quality mockups; ASCII is for quick visualization
-- Design folder input extracts colors, typography, and component structure automatically
-
----
-
-ARGUMENTS: $ARGUMENTS

package/hooks/scripts/__tests__/keyword-detector.test.js

@@ -1,242 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { execFileSync } from 'child_process';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const SCRIPT = path.resolve(__dirname, '..', 'keyword-detector.js');
-
-/**
- * Run keyword-detector.js with given text as argv.
- * Returns { stdout, exitCode }.
- */
-function runDetector(text) {
-  try {
-    const stdout = execFileSync('node', [SCRIPT, text], {
-      encoding: 'utf-8',
-      timeout: 5000,
-    });
-    return { stdout: stdout.trim(), exitCode: 0 };
-  } catch (err) {
-    return { stdout: (err.stdout || '').trim(), exitCode: err.status };
-  }
-}
-
-// ══════════════════════════════════════════════════
-// Individual keyword detection
-// ══════════════════════════════════════════════════
-describe('keyword-detector', () => {
-  describe('ralph keyword', () => {
-    it('should detect ralph keyword and emit deprecation hint', () => {
-      const result = runDetector('implement the login feature ralph');
-      expect(result.stdout).toContain('[vibe]');
-      expect(result.stdout).toContain('deprecated');
-      expect(result.stdout).toContain('persistence');
-    });
-
-    it('should detect ralph case-insensitively', () => {
-      const result = runDetector('RALPH fix all the bugs');
-      expect(result.stdout).toContain('[vibe]');
-      expect(result.stdout).toContain('deprecated');
-    });
-  });
-
-  describe('ultrawork keyword', () => {
-    it('should detect ultrawork keyword and emit automationLevel banner', () => {
-      const result = runDetector('ultrawork build the entire app');
-      expect(result.stdout).toContain('[ULTRAWORK]');
-      expect(result.stdout).toContain('parallel');
-    });
-
-    it('should detect ulw alias', () => {
-      const result = runDetector('ulw refactor the codebase');
-      expect(result.stdout).toContain('[ULTRAWORK]');
-    });
-
-    it('should detect Korean alias when word boundary matches', () => {
-      // Note: \\b word boundary may not match Korean characters reliably
-      // because \\b is designed for ASCII word boundaries.
-      // This test documents the current behavior.
-      const result = runDetector('울트라워크');
-      // Korean chars lack ASCII word boundaries, so regex may not match
-      // If it does match, great; if not, this documents the limitation
-      expect(typeof result.stdout).toBe('string');
-    });
-  });
-
-  describe('ralplan keyword', () => {
-    it('should detect ralplan keyword', () => {
-      const result = runDetector('ralplan design the architecture');
-      expect(result.stdout).toContain('[RALPLAN MODE]');
-      expect(result.stdout).toContain('persistence');
-      expect(result.stdout).toContain('planning');
-    });
-  });
-
-  // strict 키워드(일상어): 명령 끝 위치 또는 --flag 에서만 발동.
-  // 일상 영어("please verify", "quick question")의 오탐을 막기 위함.
-  describe('verify keyword (strict)', () => {
-    it('should detect verify at command tail and emit deprecation hint', () => {
-      const result = runDetector('make the implementation correct, verify');
-      expect(result.stdout).toContain('[vibe]');
-      expect(result.stdout).toContain('deprecated');
-      expect(result.stdout).toContain('verification');
-    });
-
-    it('should detect --verify flag', () => {
-      const result = runDetector('fix the bug --verify');
-      expect(result.stdout).toContain('[vibe]');
-      expect(result.stdout).toContain('deprecated');
-    });
-  });
-
-  describe('quick keyword (strict)', () => {
-    it('should detect quick at command tail and emit --max-iter 1 hint', () => {
-      const result = runDetector('fix this typo quick');
-      expect(result.stdout).toContain('[vibe]');
-      expect(result.stdout).toContain('--max-iter 1');
-      expect(result.stdout).toContain('fast');
-    });
-
-    it('should detect --quick flag', () => {
-      const result = runDetector('build the payment API --quick');
-      expect(result.stdout).toContain('[vibe]');
-      expect(result.stdout).toContain('--max-iter 1');
-    });
-  });
-
-  describe('explore keyword (strict)', () => {
-    it('should detect --explore flag', () => {
-      const result = runDetector('analyze the codebase --explore');
-      expect(result.stdout).toContain('[EXPLORE MODE]');
-      expect(result.stdout).toContain('exploration');
-    });
-  });
-
-  describe('plan keyword (strict)', () => {
-    it('should detect --plan flag', () => {
-      const result = runDetector('the new feature --plan');
-      expect(result.stdout).toContain('[PLAN MODE]');
-      expect(result.stdout).toContain('planning');
-    });
-  });
-
-  // ══════════════════════════════════════════════════
-  // 오탐 방지 회귀 테스트 — 일상어가 명령 중간/시작에 올 때 발동 금지
-  // ══════════════════════════════════════════════════
-  describe('strict keyword false-positive guard', () => {
-    it('should NOT trigger on "quick question on auth"', () => {
-      expect(runDetector('quick question on auth').stdout).toBe('');
-    });
-
-    it('should NOT trigger on "please verify the fix works"', () => {
-      expect(runDetector('please verify the fix works').stdout).toBe('');
-    });
-
-    it('should NOT trigger on "I plan to refactor later"', () => {
-      expect(runDetector('I plan to refactor later').stdout).toBe('');
-    });
-
-    it('should NOT trigger on "let me explore the options first"', () => {
-      expect(runDetector('let me explore the options first').stdout).toBe('');
-    });
-  });
-
-  // ══════════════════════════════════════════════════
-  // Keyword combinations / synergies
-  // ══════════════════════════════════════════════════
-  describe('keyword combinations', () => {
-    it('should detect ralph+ultrawork synergy and emit deprecation hint', () => {
-      const result = runDetector('ralph ultrawork build everything from scratch');
-      expect(result.stdout).toContain('[vibe]');
-      expect(result.stdout).toContain('deprecated');
-      expect(result.stdout).toContain('persistence');
-      expect(result.stdout).toContain('parallel');
-    });
-
-    it('should detect ralph+verify synergy and emit deprecation hint', () => {
-      // verify is strict → use --verify flag (ralph stays bare)
-      const result = runDetector('ralph fix each step --verify');
-      expect(result.stdout).toContain('[vibe]');
-      expect(result.stdout).toContain('deprecated');
-    });
-
-    it('should output both keywords when no synergy key matches sorted order', () => {
-      // KEYWORD_SYNERGIES defines 'ultrawork+explore' but processCombinations
-      // sorts keywords alphabetically → tries 'explore+ultrawork' which has no match.
-      // So individual outputs are emitted instead. explore is strict → --explore.
-      const result = runDetector('ultrawork analyze the entire project --explore');
-      expect(result.stdout).toContain('[ULTRAWORK]');
-      expect(result.stdout).toContain('[EXPLORE MODE]');
-      expect(result.stdout).toContain('[FLAGS]');
-    });
-  });
-
-  // ══════════════════════════════════════════════════
-  // No keywords
-  // ══════════════════════════════════════════════════
-  describe('no keywords detected', () => {
-    it('should output nothing when no keywords present', () => {
-      const result = runDetector('just a normal prompt with no magic words');
-      expect(result.stdout).toBe('');
-    });
-
-    it('should not match partial words', () => {
-      // "verify" inside "verifying" — depends on word boundary regex
-      // The regex uses \b so "verifying" would NOT match "verify" as a whole word
-      // Actually \bverify\b would match "verify" in "verifying"? No — "verifying" has
-      // chars after "verify" that are word chars, so \bverify\b won't match.
-      const result = runDetector('verifying the output looks good');
-      expect(result.stdout).toBe('');
-    });
-
-    it('should not match keywords embedded in other words', () => {
-      const result = runDetector('exploration of quickly planning');
-      // "explore" should NOT match "exploration" (word boundary)
-      // "quick" should NOT match "quickly"
-      // "plan" should NOT match "planning"
-      expect(result.stdout).toBe('');
-    });
-  });
-
-  // ══════════════════════════════════════════════════
-  // Empty input — shows help
-  // ══════════════════════════════════════════════════
-  describe('help output', () => {
-    it('should show usage info with no input', () => {
-      const result = runDetector('');
-      // Empty string arg is still truthy, pass no args instead
-      try {
-        const stdout = execFileSync('node', [SCRIPT], {
-          encoding: 'utf-8',
-          timeout: 5000,
-        });
-        expect(stdout).toContain('Available magic keywords');
-        expect(stdout).toContain('Keyword combinations');
-      } catch (err) {
-        // Should exit 0, but just in case
-        expect(err.stdout || '').toContain('Available magic keywords');
-      }
-    });
-  });
-
-  // ══════════════════════════════════════════════════
-  // Flags collection
-  // ══════════════════════════════════════════════════
-  describe('flags output', () => {
-    it('should output collected flags for single keyword', () => {
-      const result = runDetector('ralph do the thing');
-      expect(result.stdout).toContain('[FLAGS]');
-      expect(result.stdout).toContain('persistence');
-      expect(result.stdout).toContain('verification');
-    });
-
-    it('should merge flags from multiple keywords', () => {
-      // quick is strict → place at command tail; ralph stays bare
-      const result = runDetector('ralph finish this quick');
-      expect(result.stdout).toContain('[FLAGS]');
-      expect(result.stdout).toContain('persistence');
-      expect(result.stdout).toContain('fast');
-    });
-  });
-});