Help us improve
Share bugs, ideas, or general feedback.
From vibes
Generates 3-10 parallel app variations as app.jsx files from user-provided theme, visual style, and count. Use for exploring options, variations, or brainstorming app interpretations.
npx claudepluginhub popmechanic/vibesos --plugin vibesHow this skill is triggered — by the user, by Claude, or both
Slash command
/vibes:riffThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
> **Plan mode**: If you are planning work, this entire skill is ONE plan step: "Invoke /vibes:riff". Do not decompose the steps below into separate plan tasks.
Generates React web apps with TinyBase reactive data store for real-time sync. Use when creating new web apps, adding components, or prototyping SPAs with live data.
Generates live HTML/CSS visual direction proposals on scaffolded project dev server for side-by-side comparison and iterative refinement to select final UI design.
Use this skill when the user asks to "vibe code this", "build this with AI", "help me use Cursor/v0/Bolt to build this", "vibe coding from my PRD", "how do I code this with AI", "turn this spec into code", or wants guidance on using AI coding tools (Cursor, GitHub Copilot, v0, Bolt, Lovable, Claude Artifacts) to prototype or build a feature from a product spec. This is a coaching skill — it helps the PM get the most out of AI coding tools, not write code directly.
Share bugs, ideas, or general feedback.
Plan mode: If you are planning work, this entire skill is ONE plan step: "Invoke /vibes:riff". Do not decompose the steps below into separate plan tasks.
Display this ASCII art immediately when starting:
░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░▒▓███████▓▒░░▒▓████████▓▒░░▒▓███████▓▒░
░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░
░▒▓█▓▒▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░
░▒▓█▓▒▒▓█▓▒░░▒▓█▓▒░▒▓███████▓▒░░▒▓██████▓▒░ ░▒▓██████▓▒░
░▒▓█▓▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░
░▒▓█▓▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░
░▒▓██▓▒░ ░▒▓█▓▒░▒▓███████▓▒░░▒▓████████▓▒░▒▓███████▓▒░
Generate multiple app variations in parallel. Each riff is a different INTERPRETATION - different ideas, not just styling.
Detect whether you're running in a terminal (Claude Code CLI) or an editor (Cursor, Windsurf, VS Code with Copilot). Terminal agents use AskUserQuestion for all input. Editor agents present requirements as a checklist comment, wait for user edits, then proceed. See the vibes skill for the full detection and interaction pattern.
Use AskUserQuestion to collect all config at once.
Question 1: "What kind of app do you want to explore? (broad/loose is fine)"
Header: "Theme"
Options: User enters via "Other"
Question 2: "Describe the visual style - colors, mood, aesthetic"
Header: "Visual"
Options: ["Warm sunset tones", "Clean minimal white", "Neon cyberpunk", "Other (describe)"]
Question 3: "How many variations should I generate?"
Header: "Count"
Options: ["3 (recommended)", "5", "7", "10"]
After receiving all answers, proceed immediately to Step 2 - no more questions.
Note: If the frontend-design skill is available, use it for enhanced visual design quality.
mkdir -p riff-1 riff-2 riff-3 ...
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:
VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
# For each N from 1 to ${count}:
bun "$VIBES_ROOT/scripts/generate-riff.js" "${prompt}" N riff-N/app.jsx "${visual}" &
# Then wait for all
wait
echo "All ${count} riffs generated!"
Example for count=3:
VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
bun "$VIBES_ROOT/scripts/generate-riff.js" "productivity apps" 1 riff-1/app.jsx "warm sunset oranges and soft creams" &
bun "$VIBES_ROOT/scripts/generate-riff.js" "productivity apps" 2 riff-2/app.jsx "warm sunset oranges and soft creams" &
bun "$VIBES_ROOT/scripts/generate-riff.js" "productivity apps" 3 riff-3/app.jsx "warm sunset oranges and soft creams" &
wait
Why this works:
claude -p "..." → uses subscription tokens&) run in parallel → true concurrencyConvert each app.jsx to a complete index.html:
VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
bun "$VIBES_ROOT/scripts/assemble-all.js" riff-1 riff-2 riff-3 ...
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:
Create index.html gallery page with:
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.
Scripts resolve the plugin root via VIBES_ROOT, which tries ${CLAUDE_PLUGIN_ROOT} first (set by Claude Code) and falls back to deriving the path from ${CLAUDE_SKILL_DIR} (two directories up). Set it at the top of each bash block: VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
After presenting rankings, guide the user with AskUserQuestion:
Question: "You have ${count} variations ranked. What would you like to do?"
Header: "Next"
Options:
- Label: "Develop the #1 ranked app"
Description: "Take the top-ranked variation and continue building it. I'll copy riff-1/app.jsx to your working directory so you can iterate with the full vibes feature set - add functionality, refine the design, make it yours."
- Label: "Let me pick a different one"
Description: "The rankings are just my analysis - you might see something special in another variation. Tell me which riff number speaks to you and I'll set it up for development."
- Label: "Turn winner into SaaS (/sell)"
Description: "Ready to monetize the best one? Sell adds authentication via Pocket ID with passkeys, subscription billing, and multi-tenant database isolation. Each customer gets their own subdomain with their own data."
- Label: "Deploy a riff as demo (/cloudflare)"
Description: "Want to share one quickly? Deploy puts any variation live on Cloudflare Workers within minutes. Great for getting feedback before committing to further development."
- Label: "I'm done for now"
Description: "Wrap up this session. All riffs are saved in riff-1/, riff-2/, etc. - browse them locally or come back later to continue."
After user responds: