@su-record/vibe 2.6.34 → 2.6.41

package/hooks/scripts/gemini-ui-gen.js

@@ -1,281 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Gemini UI Code Generator
- *
- * 디자인 파일(이미지, HTML 등)을 분석해서 UI 코드를 생성합니다.
- * 기존 gemini-api 인프라 사용.
- *
- * Usage:
- *   node gemini-ui-gen.js --image ./design.png --framework react --output ./src/components
- *   node gemini-ui-gen.js --html ./mockup.html --framework vue --output ./src/components
- *   node gemini-ui-gen.js --design-folder ./design/ --framework react --output ./src
- */
-
-import fs from 'fs';
-import path from 'path';
-import { getLibBaseUrl } from './utils.js';
-
-const LIB_URL = getLibBaseUrl();
-
-// ============================================
-// Gemini API (기존 인프라 사용)
-// ============================================
-
-let geminiApi = null;
-
-async function getGeminiApi() {
-  if (!geminiApi) {
-    geminiApi = await import(`${LIB_URL}gemini-api.js`);
-  }
-  return geminiApi;
-}
-
-async function askGemini(prompt) {
-  const api = await getGeminiApi();
-  return api.ask(prompt, { model: 'gemini-3-flash', maxTokens: 8192, temperature: 0.3 });
-}
-
-// ============================================
-// UI Code Generation
-// ============================================
-
-function getFrameworkPrompt(framework) {
-  const prompts = {
-    react: `Generate React TypeScript components using:
-- Functional components with hooks
-- Tailwind CSS for styling
-- Proper TypeScript types/interfaces
-- Export as default`,
-
-    vue: `Generate Vue 3 components using:
-- Composition API with <script setup>
-- Tailwind CSS for styling
-- TypeScript support
-- Single File Component format`,
-
-    svelte: `Generate Svelte components using:
-- Svelte 5 runes syntax
-- Tailwind CSS for styling
-- TypeScript support`,
-
-    html: `Generate semantic HTML5 with:
-- Tailwind CSS classes
-- Accessible markup
-- Responsive design`,
-  };
-
-  return prompts[framework] || prompts.react;
-}
-
-async function generateUIFromImage(imagePath, framework) {
-  const imageBuffer = fs.readFileSync(imagePath);
-  const imageBase64 = imageBuffer.toString('base64');
-
-  const ext = path.extname(imagePath).toLowerCase();
-  const mimeTypes = {
-    '.png': 'image/png',
-    '.jpg': 'image/jpeg',
-    '.jpeg': 'image/jpeg',
-    '.webp': 'image/webp',
-    '.gif': 'image/gif',
-  };
-  const mimeType = mimeTypes[ext] || 'image/png';
-
-  const prompt = `[Image attached as base64: ${mimeType}]
-data:${mimeType};base64,${imageBase64}
-
-Analyze this UI design image and generate production-ready code.
-
-${getFrameworkPrompt(framework)}
-
-Requirements:
-1. Match the visual design exactly (colors, spacing, typography, layout)
-2. Extract exact colors as hex values
-3. Use proper semantic HTML structure
-4. Make it responsive (mobile-first)
-5. Include hover/focus states where appropriate
-6. Add appropriate accessibility attributes
-
-Output format:
-\`\`\`${framework === 'html' ? 'html' : 'tsx'}
-// Component code here
-\`\`\`
-
-Also provide a summary of:
-- Colors extracted
-- Components identified
-- Layout structure`;
-
-  return askGemini(prompt);
-}
-
-async function generateUIFromHTML(htmlPath, framework) {
-  const htmlContent = fs.readFileSync(htmlPath, 'utf-8');
-
-  const prompt = `Convert this HTML mockup to production-ready ${framework} code.
-
-HTML Mockup:
-\`\`\`html
-${htmlContent}
-\`\`\`
-
-${getFrameworkPrompt(framework)}
-
-Requirements:
-1. Preserve the exact visual appearance
-2. Extract inline styles to Tailwind classes
-3. Create reusable components where appropriate
-4. Add proper TypeScript types
-5. Make it responsive
-
-Output the converted code in proper format.`;
-
-  return askGemini(prompt);
-}
-
-async function analyzeDesignFolder(folderPath, framework) {
-  const files = fs.readdirSync(folderPath);
-  let combinedPrompt = `Analyze the following design files and generate production-ready ${framework} code.\n\n`;
-
-  for (const file of files) {
-    const filePath = path.join(folderPath, file);
-    const ext = path.extname(file).toLowerCase();
-
-    if (['.png', '.jpg', '.jpeg', '.webp', '.gif'].includes(ext)) {
-      const imageBuffer = fs.readFileSync(filePath);
-      const imageBase64 = imageBuffer.toString('base64');
-      const mimeType = ext === '.png' ? 'image/png' : ext === '.webp' ? 'image/webp' : 'image/jpeg';
-      combinedPrompt += `\n--- Image: ${file} ---\ndata:${mimeType};base64,${imageBase64}\n`;
-      console.log(`📷 ${file}`);
-    } else if (ext === '.html') {
-      const content = fs.readFileSync(filePath, 'utf-8');
-      combinedPrompt += `\n--- HTML: ${file} ---\n${content}\n`;
-      console.log(`📄 ${file}`);
-    } else if (ext === '.json') {
-      const content = fs.readFileSync(filePath, 'utf-8');
-      combinedPrompt += `\n--- Design Tokens: ${file} ---\n${content}\n`;
-      console.log(`📋 ${file}`);
-    } else if (['.css', '.scss'].includes(ext)) {
-      const content = fs.readFileSync(filePath, 'utf-8');
-      combinedPrompt += `\n--- Styles: ${file} ---\n${content}\n`;
-      console.log(`🎨 ${file}`);
-    } else if (ext === '.md') {
-      const content = fs.readFileSync(filePath, 'utf-8');
-      combinedPrompt += `\n--- Guide: ${file} ---\n${content}\n`;
-      console.log(`📝 ${file}`);
-    }
-  }
-
-  combinedPrompt += `\n${getFrameworkPrompt(framework)}
-
-Requirements:
-1. Match the visual design exactly
-2. Extract design tokens from JSON if provided
-3. Use CSS variables from stylesheets if provided
-4. Create separate component files for each major UI section
-5. Make it responsive (mobile-first)
-6. Include accessibility attributes
-
-Output complete component code.`;
-
-  return askGemini(combinedPrompt);
-}
-
-// ============================================
-// CLI
-// ============================================
-
-async function main() {
-  const args = process.argv.slice(2);
-
-  const options = {
-    image: null,
-    html: null,
-    designFolder: null,
-    framework: 'react',
-    output: './generated',
-  };
-
-  for (let i = 0; i < args.length; i++) {
-    switch (args[i]) {
-      case '--image':
-        options.image = args[++i];
-        break;
-      case '--html':
-        options.html = args[++i];
-        break;
-      case '--design-folder':
-      case '--folder':
-        options.designFolder = args[++i];
-        break;
-      case '--framework':
-      case '-f':
-        options.framework = args[++i];
-        break;
-      case '--output':
-      case '-o':
-        options.output = args[++i];
-        break;
-      case '--help':
-      case '-h':
-        console.log(`
-Gemini UI Code Generator
-
-Usage:
-  node gemini-ui-gen.js --image ./design.png --framework react
-  node gemini-ui-gen.js --html ./mockup.html --framework vue
-  node gemini-ui-gen.js --design-folder ./design/ --framework react
-
-Options:
-  --image <path>         Image file to analyze
-  --html <path>          HTML mockup to convert
-  --design-folder <path> Folder with design files
-  --framework <name>     Target framework (react, vue, svelte, html)
-  --output <path>        Output directory
-  --help                 Show this help
-`);
-        process.exit(0);
-    }
-  }
-
-  console.log(`🤖 Gemini UI Generator`);
-  console.log(`📦 Framework: ${options.framework}`);
-
-  try {
-    let result;
-
-    if (options.image) {
-      console.log(`\n📷 Analyzing: ${options.image}\n`);
-      result = await generateUIFromImage(options.image, options.framework);
-    } else if (options.html) {
-      console.log(`\n📄 Converting: ${options.html}\n`);
-      result = await generateUIFromHTML(options.html, options.framework);
-    } else if (options.designFolder) {
-      console.log(`\n📂 Analyzing folder: ${options.designFolder}\n`);
-      result = await analyzeDesignFolder(options.designFolder, options.framework);
-    } else {
-      console.error('❌ No input specified. Use --image, --html, or --design-folder');
-      process.exit(1);
-    }
-
-    console.log('\n' + '='.repeat(60) + '\n');
-    console.log(result);
-    console.log('\n' + '='.repeat(60));
-
-    if (options.output && result) {
-      if (!fs.existsSync(options.output)) {
-        fs.mkdirSync(options.output, { recursive: true });
-      }
-      const outputFile = path.join(options.output, `generated-${Date.now()}.txt`);
-      fs.writeFileSync(outputFile, result);
-      console.log(`\n✅ Output saved to: ${outputFile}`);
-    }
-
-  } catch (error) {
-    console.error(`\n❌ Error: ${error.message}`);
-    process.exit(1);
-  }
-}
-
-main();

package/skills/brand-assets.md

@@ -1,137 +0,0 @@
----
-name: brand-assets
-description: "Auto-generate app icons and favicons from SPEC brand information using Gemini Image API"
-triggers: [icon, favicon, brand, logo, app icon, branding, assets]
-priority: 65
----
-# Brand Assets Generation Skill
-
-Auto-generate app icons and favicons based on SPEC brand information.
-
-## When to Use
-
-- First-time project setup with `/vibe.run`
-- When SPEC contains brand/design information
-- When Gemini API key is configured
-
-## Prerequisites
-
-- Gemini API key configured (`vibe gemini auth`)
-- SPEC with brand context (app name, colors, style)
-
-## Generated Assets
-
-### Web
-- `favicon.ico` (16x16, 32x32, 48x48)
-- `favicon-16x16.png`
-- `favicon-32x32.png`
-- `apple-touch-icon.png` (180x180)
-- `android-chrome-192x192.png`
-- `android-chrome-512x512.png`
-
-### Mobile (if applicable)
-- iOS: `AppIcon.appiconset/` with all sizes
-- Android: `mipmap-*/` adaptive icons
-
-## SPEC Brand Section
-
-For best results, include brand info in your SPEC:
-
-```yaml
-<context>
-Brand:
-  - App Name: MyApp
-  - Primary Color: #2F6BFF
-  - Style: Modern, minimal, flat design
-  - Icon Concept: Abstract geometric shape representing connectivity
-</context>
-```
-
-## Generation Flow
-
-```
-SPEC Brand Info
-      |
-      v
-Extract: name, colors, style keywords
-      |
-      v
-Generate Prompt: "App icon for [name], [style], [colors]..."
-      |
-      v
-Gemini Image API (gemini-2.5-flash-image)
-      |
-      v
-Resize & Convert: All platform sizes
-      |
-      v
-Save to: public/ or assets/
-```
-
-## Auto-Trigger Conditions
-
-1. First `/vibe.run` execution (no existing icons)
-2. SPEC contains brand/design context
-3. Gemini API key is available
-4. `--generate-icons` flag passed
-
-## Skip Conditions
-
-- Icons already exist (unless `--regenerate-icons`)
-- No brand info in SPEC
-- Gemini API not configured
-
-## Prompt Template
-
-```
-Create a modern app icon for "[APP_NAME]".
-
-Style: [STYLE_KEYWORDS]
-Primary color: [PRIMARY_COLOR]
-Design: Minimalist, professional, suitable for mobile app
-Format: Square, clean edges, simple recognizable shape
-Background: Solid color or subtle gradient
-
-Requirements:
-- Works at small sizes (16x16 to 512x512)
-- No text or letters
-- Single focal element
-- High contrast for visibility
-```
-
-## Manual Usage
-
-```bash
-# Generate via llm-orchestrate (when Gemini configured)
-node "$(node -p "process.env.APPDATA || require('os').homedir() + '/.config'")/vibe/hooks/scripts/llm-orchestrate.js" gemini image "App icon for MyApp, primary color #2F6BFF, square format 1:1, simple recognizable design, works well at small sizes, no text or letters, solid or gradient background, modern minimalist" --output "./public/app-icon.png"
-```
-
-## Integration with /vibe.run
-
-During Phase 1 (Setup), if brand assets don't exist:
-
-1. Parse SPEC for brand context
-2. Generate icon via Gemini Image API
-3. Create all size variants
-4. Place in appropriate directories
-5. Update manifest files if needed
-
-## Fallback Strategy
-
-If Gemini Image fails:
-1. Generate text-based monogram icon (first letter)
-2. Use project primary color as background
-3. Create simple geometric placeholder
-
-## Output Structure
-
-```
-public/
-  favicon.ico
-  favicon-16x16.png
-  favicon-32x32.png
-  apple-touch-icon.png
-  android-chrome-192x192.png
-  android-chrome-512x512.png
-  site.webmanifest
-```

package/skills/context7-usage.md

@@ -1,102 +0,0 @@
----
-description: Context7 plugin for latest library documentation. Auto-activates when docs, documentation, latest version, official docs, API reference, or library help is needed.
----
-
-# Context7 Usage
-
-Guide for searching latest library/framework documentation using Context7 plugin with subagent isolation.
-
-## Why Subagent Approach?
-
-| Approach | Problem |
-|----------|---------|
-| Direct plugin call | Docs content fills main context, causing bloat |
-| Subagent isolation | Docs queried in separate context, only results returned |
-
-**Benefits:**
-
-- Prevents context bloat during long coding sessions
-- Solves knowledge cutoff problem with latest docs
-- Main context stays focused on implementation
-
-## When to Use
-
-| Situation | Example |
-|-----------|---------|
-| Latest API check | "React 19 use() hook usage" |
-| Version differences | "Next.js 15 changes" |
-| Official docs needed | "Prisma schema syntax" |
-| Migration guide | "Vue 2 → Vue 3 migration" |
-
-## How It Works
-
-```
-User asks library question
-    ↓
-Skill detects docs need
-    ↓
-Spawn docs-researcher subagent (haiku)
-    ↓
-Subagent calls context7 in isolated context
-    ↓
-Returns only relevant info to main context
-```
-
-## Usage
-
-### Automatic (Recommended)
-
-Just ask library/API questions naturally:
-
-```
-"How do I use React 19 use() hook?"
-"What's new in Next.js 15?"
-"Prisma many-to-many relation syntax"
-```
-
-The skill auto-detects and spawns a docs-researcher subagent.
-
-### Manual Command
-
-```
-/context7:docs <library> [query]
-```
-
-Examples:
-
-```
-/context7:docs react hooks
-/context7:docs next.js app router
-/context7:docs prisma relations
-```
-
-## Implementation Pattern
-
-When you detect a library/API documentation need, spawn a subagent:
-
-```
-Task tool call:
-- subagent_type: Explore
-- model: haiku
-- prompt: "Use context7 to find [library] documentation about [topic]. Return only the relevant API usage examples and key points."
-```
-
-The subagent handles the context7 calls and returns a summary, keeping main context clean.
-
-## Fallback Chain
-
-```
-context7 plugin not installed
-    ↓
-Prompt user: /plugin install context7
-    ↓
-If still unavailable: Web Search for official docs
-```
-
-## Installation
-
-If context7 is not installed, guide user:
-
-```bash
-/plugin install context7
-```

package/skills/git-worktree.md

@@ -1,181 +0,0 @@
----
-description: Git Worktree for parallel branch work. Auto-activates for PR review, hotfix, parallel testing, or working on multiple branches simultaneously.
----
-# Git Worktree Skill
-
-Parallel branch work using Git Worktree
-
-## Overview
-
-Perform reviews/tests on other branches without interrupting main work
-
-## Usage
-
-```bash
-# Create worktree
-git worktree add ../review-pr123 pr/123
-
-# Work in that directory
-cd ../review-pr123
-npm test
-
-# Clean up after work is done
-git worktree remove ../review-pr123
-```
-
-## Commands
-
-### Create Worktree
-
-```bash
-# Worktree for PR review
-git worktree add ../review-{pr_number} origin/pr/{pr_number}
-
-# Worktree for specific branch
-git worktree add ../feature-work feature/new-feature
-
-# Worktree with new branch
-git worktree add -b hotfix/urgent ../hotfix main
-```
-
-### List Worktrees
-
-```bash
-git worktree list
-# /path/to/main       abc1234 [main]
-# /path/to/review-123 def5678 [pr/123]
-```
-
-### Remove Worktree
-
-```bash
-# Normal removal
-git worktree remove ../review-123
-
-# Force removal (ignore uncommitted changes)
-git worktree remove --force ../review-123
-
-# Prune stale worktrees
-git worktree prune
-```
-
-## Workflow Integration
-
-### PR Review Workflow
-
-```
-┌─────────────────────────────────────────────────────────────────┐
-│  /vibe.review PR#123                                             │
-├─────────────────────────────────────────────────────────────────┤
-│                                                                 │
-│  1. git worktree add ../review-123 origin/pr/123               │
-│  2. cd ../review-123                                            │
-│  3. npm install && npm test                                     │
-│  4. Run parallel review agents                                  │
-│  5. Generate review report                                      │
-│  6. cd - && git worktree remove ../review-123                  │
-│                                                                 │
-└─────────────────────────────────────────────────────────────────┘
-```
-
-### Hotfix Workflow
-
-```
-┌─────────────────────────────────────────────────────────────────┐
-│  Urgent hotfix while working on feature                         │
-├─────────────────────────────────────────────────────────────────┤
-│                                                                 │
-│  # Keep feature work intact                                     │
-│  git worktree add -b hotfix/critical ../hotfix main            │
-│  cd ../hotfix                                                   │
-│                                                                 │
-│  # Fix and deploy                                               │
-│  vim src/bug.py                                                 │
-│  git commit -am "fix: critical bug"                             │
-│  git push origin hotfix/critical                                │
-│                                                                 │
-│  # Return to feature                                            │
-│  cd - && git worktree remove ../hotfix                         │
-│                                                                 │
-└─────────────────────────────────────────────────────────────────┘
-```
-
-## Benefits
-
-1. **No Stash Needed**: Keep current work intact
-2. **Full Codebase**: Each worktree is a complete codebase
-3. **Parallel Work**: Work on multiple branches simultaneously
-4. **Clean Testing**: Test in isolated environment
-
-## Best Practices
-
-### Naming Convention
-
-```bash
-# PR review
-../review-{pr_number}
-
-# Hotfix
-../hotfix-{issue_number}
-
-# Experiment
-../experiment-{feature_name}
-```
-
-### Cleanup
-
-```bash
-# Regular cleanup
-git worktree prune
-
-# Check all worktrees
-git worktree list
-
-# Auto cleanup with script
-for wt in $(git worktree list --porcelain | grep worktree | cut -d' ' -f2); do
-  if [[ $wt == *"review-"* ]] || [[ $wt == *"hotfix-"* ]]; then
-    git worktree remove "$wt" 2>/dev/null || true
-  fi
-done
-```
-
-### Integration with CI/CD
-
-```yaml
-# GitHub Actions example
-- name: Setup Review Worktree
-  run: |
-    git fetch origin pull/${{ github.event.pull_request.number }}/head:pr-${{ github.event.pull_request.number }}
-    git worktree add ../review pr-${{ github.event.pull_request.number }}
-
-- name: Run Tests in Worktree
-  working-directory: ../review
-  run: npm test
-
-- name: Cleanup
-  run: git worktree remove ../review
-```
-
-## Troubleshooting
-
-### "already checked out" Error
-
-```bash
-# Solution: Branch is already in another worktree
-git worktree list  # Check
-git worktree remove <path>  # Remove
-```
-
-### Locked Worktree
-
-```bash
-# Solution: Unlock the locked worktree
-git worktree unlock <path>
-```
-
-### Stale Worktree
-
-```bash
-# Solution: Clean up deleted directories
-git worktree prune
-```