Display this ASCII art immediately when starting:

░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░▒▓███████▓▒░░▒▓████████▓▒░░▒▓███████▓▒░
░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░      ░▒▓█▓▒░
 ░▒▓█▓▒▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░      ░▒▓█▓▒░
 ░▒▓█▓▒▒▓█▓▒░░▒▓█▓▒░▒▓███████▓▒░░▒▓██████▓▒░  ░▒▓██████▓▒░
  ░▒▓█▓▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░             ░▒▓█▓▒░
  ░▒▓█▓▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░             ░▒▓█▓▒░
   ░▒▓██▓▒░  ░▒▓█▓▒░▒▓███████▓▒░░▒▓████████▓▒░▒▓███████▓▒░

Vibes Riff Generator

Generate multiple app variations in parallel. Each riff is a different INTERPRETATION - different ideas, not just styling.

Workflow

Step 1: Gather Requirements

Ask for: prompt (broad/loose is fine) and count (1-10, recommend 3-5)

Step 2: Create Riff Directories

mkdir -p riff-1 riff-2 riff-3 ...

Step 3: Generate Riffs in Parallel

Use the bundled script to generate riffs in parallel. Each script instance calls claude -p (uses subscription tokens) and writes directly to disk.

Generate riffs in parallel based on user's count:

# For each N from 1 to ${count}:
node "${CLAUDE_PLUGIN_ROOT}/scripts/generate-riff.js" "${prompt}" N riff-N/app.jsx &

# Then wait for all
wait
echo "All ${count} riffs generated!"

Example for count=3:

node "${CLAUDE_PLUGIN_ROOT}/scripts/generate-riff.js" "the theme" 1 riff-1/app.jsx &
node "${CLAUDE_PLUGIN_ROOT}/scripts/generate-riff.js" "the theme" 2 riff-2/app.jsx &
node "${CLAUDE_PLUGIN_ROOT}/scripts/generate-riff.js" "the theme" 3 riff-3/app.jsx &
wait

Why this works:

• Each script calls claude -p "..." → uses subscription tokens
• Script writes directly to disk → no tokens flow through main agent
• Background processes (&) run in parallel → true concurrency
• Main agent only sees "✓ riff-N/app.jsx" output → minimal tokens

Step 4: Assemble HTML

Convert each app.jsx to a complete index.html:

node "${CLAUDE_PLUGIN_ROOT}/scripts/assemble-all.js" riff-1 riff-2 riff-3 ...

Step 5: Evaluate & Rank

Read the pitch.md files (NOT the full code) for fast evaluation:

# Read pitch files - contains reasoning about theme, colors, functionality
cat riff-*/pitch.md

# Also read BUSINESS comments for app names (just first 10 lines of each)
head -10 riff-*/app.jsx

pitch.md contains the model's reasoning about theme, colors, and design choices. BUSINESS comment (top of app.jsx) contains: name, pitch, customer, revenue.

Then create RANKINGS.md using this format:

# Riff Rankings: [Theme]

## Summary

| Rank | App Name | Score | Best For |
|------|----------|-------|----------|
| 1 | [Name] | XX/50 | [one-liner] |
| 2 | [Name] | XX/50 | [one-liner] |
| ... | ... | ... | ... |

## Detailed Scores

### #1: [App Name] (riff-N)
| Criterion | Score | Notes |
|-----------|-------|-------|
| Originality | X/10 | [Why unique or derivative] |
| Market Potential | X/10 | [Target audience size, demand] |
| Feasibility | X/10 | [Technical complexity, time to build] |
| Monetization | X/10 | [Revenue model viability] |
| Wow Factor | X/10 | [First impression, engagement] |
| **Total** | **XX/50** | |

[Repeat for each riff]

## Recommendations

- **Best for solo founder:** [riff-N] - [reason]
- **Fastest to ship:** [riff-N] - [reason]
- **Most innovative:** [riff-N] - [reason]
- **Best monetization:** [riff-N] - [reason]

Scoring Guidelines:

• 1-3: Poor - significant issues
• 4-5: Below average - notable weaknesses
• 6-7: Average - meets expectations
• 8-9: Good - stands out positively
• 10: Excellent - exceptional in this criterion

Step 6: Generate Gallery

Create index.html gallery page with:

• Dark theme (#0a0a0f background)
• Glass-morphism cards with purple/cyan accents
• Each card: rank badge, app name, pitch, score bar, "Launch →" link
• Responsive grid layout
• Self-contained with inline styles

Step 7: Present Results

Generated ${count} riffs for "${prompt}":
#1: riff-X - App Name (XX/50)
#2: riff-Y - App Name (XX/50)
...

Open index.html for gallery, or browse riff-1/, riff-2/, etc.

Plugin Directory

The plugin root is available via ${CLAUDE_PLUGIN_ROOT} which Claude Code resolves at runtime.