riff

Name: riff
Author: popmechanic

134stars6forks

How to install riff?

popmechanic/vibesos/riff

$npx -y skills add popmechanic/VibesOS --skill riff

Installs into the current project.

Summary

Self-contained parallel generator — invoke directly, do not decompose. Generates 3-10 app variations in parallel for comparing ideas. Use when user says "explore options", "give me variations", "riff on this", "brainstorm approaches", or wants to see multiple interpretations of a

Files · 1

View on GitHub

SKILL.md

1	> 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.
2
3	Display this ASCII art immediately when starting:
4
5	```
6	░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░▒▓███████▓▒░░▒▓████████▓▒░░▒▓███████▓▒░
7	░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░
8	░▒▓█▓▒▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░
9	░▒▓█▓▒▒▓█▓▒░░▒▓█▓▒░▒▓███████▓▒░░▒▓██████▓▒░ ░▒▓██████▓▒░
10	░▒▓█▓▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░
11	░▒▓█▓▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░
12	░▒▓██▓▒░ ░▒▓█▓▒░▒▓███████▓▒░░▒▓████████▓▒░▒▓███████▓▒░
13	```
14
15	# Vibes Riff Generator
16
17	Generate multiple app variations in parallel. Each riff is a different INTERPRETATION - different ideas, not just styling.
18
19	### Terminal or Editor UI?
20
21	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.
22
23	## Workflow
24
25	### Step 1: Gather ALL Requirements Upfront
26
27	Use AskUserQuestion to collect all config at once.
28
29	```
30	Question 1: "What kind of app do you want to explore? (broad/loose is fine)"
31	Header: "Theme"
32	Options: User enters via "Other"
33
34	Question 2: "Describe the visual style - colors, mood, aesthetic"
35	Header: "Visual"
36	Options: ["Warm sunset tones", "Clean minimal white", "Neon cyberpunk", "Other (describe)"]
37
38	Question 3: "How many variations should I generate?"
39	Header: "Count"
40	Options: ["3 (recommended)", "5", "7", "10"]
41	```
42
43	After receiving all answers, proceed immediately to Step 2 - no more questions.
44
45	Note: If the `frontend-design` skill is available, use it for enhanced visual design quality.
46
47	### Step 2: Create Riff Directories
48	```bash
49	mkdir -p riff-1 riff-2 riff-3 ...
50	```
51
52	### Step 3: Generate Riffs in Parallel
53
54	Use the bundled script to generate riffs in parallel. Each script instance calls `claude -p` (uses subscription tokens) and writes directly to disk.
55
56	Generate riffs in parallel based on user's count:
57	```bash
58	VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
59	# For each N from 1 to ${count}:
60	bun "$VIBES_ROOT/scripts/generate-riff.js" "${prompt}" N riff-N/app.jsx "${visual}" &
61
62	# Then wait for all
63	wait
64	echo "All ${count} riffs generated!"
65	```
66
67	Example for count=3:
68	```bash
69	VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
70	bun "$VIBES_ROOT/scripts/generate-riff.js" "productivity apps" 1 riff-1/app.jsx "warm sunset oranges and soft creams" &
71	bun "$VIBES_ROOT/scripts/generate-riff.js" "productivity apps" 2 riff-2/app.jsx "warm sunset oranges and soft creams" &
72	bun "$VIBES_ROOT/scripts/generate-riff.js" "productivity apps" 3 riff-3/app.jsx "warm sunset oranges and soft creams" &
73	wait
74	```
75
76	Why this works:
77	- Each script calls `claude -p "..."` → uses subscription tokens
78	- Script writes directly to disk → no tokens flow through main agent
79	- Background processes (`&`) run in parallel → true concurrency
80	- Main agent only sees "✓ riff-N/app.jsx" output → minimal tokens
81
82	### Step 4: Assemble HTML
83
84	Convert each app.jsx to a complete index.html:
85
86	```bash
87	VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
88	bun "$VIBES_ROOT/scripts/assemble-all.js" riff-1 riff-2 riff-3 ...
89	```
90
91	### Step 5: Evaluate & Rank
92
93	Read the pitch.md files (NOT the full code) for fast evaluation:
94
95	```bash
96	# Read pitch files - contains reasoning about theme, colors, functionality
97	cat riff-*/pitch.md
98
99	# Also read BUSINESS comments for app names (just first 10 lines of each)
100	head -10 riff-*/app.jsx
101	```
102
103	pitch.md contains the model's reasoning about theme, colors, and design choices.
104	BUSINESS comment (top of app.jsx) contains: name, pitch, customer, revenue.
105
106	Then create RANKINGS.md using this format:
107
108	```markdown
109	# Riff Rankings: [Theme]
110
111	## Summary
112
113	\| Rank \| App Name \| Score \| Best For \|
114	\|------\|----------\|-------\|----------\|
115	\| 1 \| [Name] \| XX/50 \| [one-liner] \|
116	\| 2 \| [Name] \| XX/50 \| [one-liner] \|
117	\| ... \| ... \| ... \| ... \|
118
119	## Detailed Scores
120
121	### #1: [App Name] (riff-N)
122	\| Criterion \| Score \| Notes \|
123	\|-----------\|-------\|-------\|
124	\| Originality \| X/10 \| [Why unique or derivative] \|
125	\| Market Potential \| X/10 \| [Target audience size, demand] \|
126	\| Feasibility \| X/10 \| [Technical complexity, time to build] \|
127	\| Monetization \| X/10 \| [Revenue mo

People who liked this also viewed

6 picks

Type

riff

134stars6forks

View on GitHub

How to install riff?

popmechanic/vibesos/riff

$npx -y skills add popmechanic/VibesOS --skill riff

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	> 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.
2
3	Display this ASCII art immediately when starting:
4
5	```
6	░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░▒▓███████▓▒░░▒▓████████▓▒░░▒▓███████▓▒░
7	░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░
8	░▒▓█▓▒▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░
9	░▒▓█▓▒▒▓█▓▒░░▒▓█▓▒░▒▓███████▓▒░░▒▓██████▓▒░ ░▒▓██████▓▒░
10	░▒▓█▓▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░
11	░▒▓█▓▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░
12	░▒▓██▓▒░ ░▒▓█▓▒░▒▓███████▓▒░░▒▓████████▓▒░▒▓███████▓▒░
13	```
14
15	# Vibes Riff Generator
16
17	Generate multiple app variations in parallel. Each riff is a different INTERPRETATION - different ideas, not just styling.
18
19	### Terminal or Editor UI?
20
21	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.
22
23	## Workflow
24
25	### Step 1: Gather ALL Requirements Upfront
26
27	Use AskUserQuestion to collect all config at once.
28
29	```
30	Question 1: "What kind of app do you want to explore? (broad/loose is fine)"
31	Header: "Theme"
32	Options: User enters via "Other"
33
34	Question 2: "Describe the visual style - colors, mood, aesthetic"
35	Header: "Visual"
36	Options: ["Warm sunset tones", "Clean minimal white", "Neon cyberpunk", "Other (describe)"]
37
38	Question 3: "How many variations should I generate?"
39	Header: "Count"
40	Options: ["3 (recommended)", "5", "7", "10"]
41	```
42
43	After receiving all answers, proceed immediately to Step 2 - no more questions.
44
45	Note: If the `frontend-design` skill is available, use it for enhanced visual design quality.
46
47	### Step 2: Create Riff Directories
48	```bash
49	mkdir -p riff-1 riff-2 riff-3 ...
50	```
51
52	### Step 3: Generate Riffs in Parallel
53
54	Use the bundled script to generate riffs in parallel. Each script instance calls `claude -p` (uses subscription tokens) and writes directly to disk.
55
56	Generate riffs in parallel based on user's count:
57	```bash
58	VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
59	# For each N from 1 to ${count}:
60	bun "$VIBES_ROOT/scripts/generate-riff.js" "${prompt}" N riff-N/app.jsx "${visual}" &
61
62	# Then wait for all
63	wait
64	echo "All ${count} riffs generated!"
65	```
66
67	Example for count=3:
68	```bash
69	VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
70	bun "$VIBES_ROOT/scripts/generate-riff.js" "productivity apps" 1 riff-1/app.jsx "warm sunset oranges and soft creams" &
71	bun "$VIBES_ROOT/scripts/generate-riff.js" "productivity apps" 2 riff-2/app.jsx "warm sunset oranges and soft creams" &
72	bun "$VIBES_ROOT/scripts/generate-riff.js" "productivity apps" 3 riff-3/app.jsx "warm sunset oranges and soft creams" &
73	wait
74	```
75
76	Why this works:
77	- Each script calls `claude -p "..."` → uses subscription tokens
78	- Script writes directly to disk → no tokens flow through main agent
79	- Background processes (`&`) run in parallel → true concurrency
80	- Main agent only sees "✓ riff-N/app.jsx" output → minimal tokens
81
82	### Step 4: Assemble HTML
83
84	Convert each app.jsx to a complete index.html:
85
86	```bash
87	VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
88	bun "$VIBES_ROOT/scripts/assemble-all.js" riff-1 riff-2 riff-3 ...
89	```
90
91	### Step 5: Evaluate & Rank
92
93	Read the pitch.md files (NOT the full code) for fast evaluation:
94
95	```bash
96	# Read pitch files - contains reasoning about theme, colors, functionality
97	cat riff-*/pitch.md
98
99	# Also read BUSINESS comments for app names (just first 10 lines of each)
100	head -10 riff-*/app.jsx
101	```
102
103	pitch.md contains the model's reasoning about theme, colors, and design choices.
104	BUSINESS comment (top of app.jsx) contains: name, pitch, customer, revenue.
105
106	Then create RANKINGS.md using this format:
107
108	```markdown
109	# Riff Rankings: [Theme]
110
111	## Summary
112
113	\| Rank \| App Name \| Score \| Best For \|
114	\|------\|----------\|-------\|----------\|
115	\| 1 \| [Name] \| XX/50 \| [one-liner] \|
116	\| 2 \| [Name] \| XX/50 \| [one-liner] \|
117	\| ... \| ... \| ... \| ... \|
118
119	## Detailed Scores
120
121	### #1: [App Name] (riff-N)
122	\| Criterion \| Score \| Notes \|
123	\|-----------\|-------\|-------\|
124	\| Originality \| X/10 \| [Why unique or derivative] \|
125	\| Market Potential \| X/10 \| [Target audience size, demand] \|
126	\| Feasibility \| X/10 \| [Technical complexity, time to build] \|
127	\| Monetization \| X/10 \| [Revenue mo

People who liked this also viewed

6 picks

Type