Agent skill

Riff

by popmechanic in popmechanic/VibesOS

Self-contained parallel generator — invoke directly, do not decompose.

MITAuto-check: notesAgent Workflows

Install Riff

skills CLI
$ npx skills add popmechanic/VibesOS --skill riff -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install popmechanic/VibesOS riff --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/popmechanic/VibesOS.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/riff .claude/skills/riff && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
riff
GitHub stars
136
Token cost
~2k tokens
SKILL.md length
453 words
Files
4
Skills in repo
7
Repo updated
First seen
Licence
MIT

At a glance

Self-contained parallel generator — invoke directly, do not decompose.

  • Works in 7 steps: Gather ALL Requirements Upfront → Create Riff Directories → Generate Riffs in Parallel → …
  • User says explore options
  • SKILL.md covers Workflow, Plugin Directory and What's Next?
  • Calls bun and claude

What it does

Riff is an agent skill from popmechanic/VibesOS. 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 concept.

Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files.

It sits in Agent Workflows, covering Brainstorming. The repository describes itself as: A GUI for Claude Code that makes it easy to vibe code simple, un-hackable apps. The licence is MIT.

When your agent uses it

  • User says explore options
  • Give me variations
  • Brainstorm approaches
  • Wants to see multiple interpretations of a concept

Example prompts

  • “explore options”
  • “give me variations”
  • “riff on this”
  • “/riff”

Requirements

  • Pre-approved tools (allowed-tools): Read, Write, Bash, Task, Glob, AskUserQuestion

Workflow steps

7 steps, taken from the step headings in SKILL.md.

  1. Gather ALL Requirements Upfront
  2. Create Riff Directories
  3. Generate Riffs in Parallel
  4. Assemble HTML
  5. Evaluate & Rank
  6. Generate Gallery
  7. Present Results

What it can do on your machine

Read from SKILL.md and the folder at commit 5baf8a2. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Write
    • Bash
    • Task
    • Glob
    • AskUserQuestion

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • bun
    • claude

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Riff loads about 2k tokens when it runs. Until then it costs about 74 tokens; SKILL.md has 453 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~74
When it runs · the whole SKILL.md, loaded when a task matches
~2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Read, Write, Bash, Task, Glob, AskUserQuestion

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from popmechanic/VibesOS at commit 5baf8a2, republished under its MIT licence (© popmechanic). 453 words, ~2,034 tokens.

Download SKILL.mdSave it as .claude/skills/riff/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
riff
description
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 concept.
allowed-tools
Read, Write, Bash, Task, Glob, AskUserQuestion
argument-hint
[prompt]
license
MIT
metadata.author
Marcus Estes

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:

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

Vibes Riff Generator

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

Terminal or Editor UI?

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.

Workflow

Step 1: Gather ALL Requirements Upfront

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.

Step 2: Create Riff Directories
bash
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:

bash
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:

bash
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:

  • 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:

bash
VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
bun "$VIBES_ROOT/scripts/assemble-all.js" riff-1 riff-2 riff-3 ...
Show full SKILL.md (211 more words)Show less
Step 5: Evaluate & Rank

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

bash
# 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:

markdown
# 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

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

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}")")}"


What's Next?

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:

  • "Develop #1" → Copy riff-1/app.jsx to ./app.jsx, confirm ready for vibes iteration
  • "Pick different" → Ask which riff number, then copy that one
  • "Turn into SaaS" → Copy riff-1/app.jsx, auto-invoke /vibes:factory skill
  • "Deploy demo" → Ask which riff, auto-invoke /vibes:cloudflare skill with that riff's index.html
  • "I'm done" → Confirm riffs saved, provide directory listing

© popmechanic, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files in skills/riff of popmechanic/VibesOS.

  • SKILL.md
  • defaults/style-prompt.txt
  • template.delta.html
  • templates/index.html

Open the folder on GitHubat commit 5baf8a2

Compare with similar skills

Riff next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Riff compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Riff this skillpopmechanic/VibesOS136—~2kAutomated safety check: NotesMIT
Brainstormingobra/superpowers297k1 repos~2.5kAutomated safety check: PassMIT
Brainstormingxpinjection/test-driven-spring-boot11252 repos~2.6kAutomated safety check: PassMIT
Yao Meta Skillyaojingang/yao-meta-skill2.7k—~768Automated safety check: PassMIT
Typesafe AIOpenAgentsInc/openagents4559 repos~2.5kAutomated safety check: PassMIT
Trellis StartROYIANS/foliq-print-template-designer1366 repos~646Automated safety check: PassMIT

Similar skills

  • Brainstorming

    obra/superpowers

    Makes the agent clarify intent and agree on a design with you before writing any code, scaling the process from a quick spike to a written spec.

    297k GitHub starsUsed in 1 repo~2.5k tokens
    Agent WorkflowsAuto-check passed
  • Brainstorming

    xpinjection/test-driven-spring-boot

    You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior.

    112 GitHub starsUsed in 52 repos~2.6k tokens
    Agent WorkflowsAuto-check passed
  • Yao Meta Skill

    yaojingang/yao-meta-skill

    Create, improve, or evaluate an existing skill from workflows, prompts, SOPs, scripts.

    2.7k GitHub stars~768 tokensUpdated 1 mo ago
    Agent WorkflowsAuto-check passed
  • Typesafe AI

    OpenAgentsInc/openagents

    Build AI-powered software with TypeSafe: small units of AI intelligence you can use like programming primitives.

    455 GitHub starsUsed in 9 repos~2.5k tokens
    Agent WorkflowsAuto-check passed
  • Trellis Start

    ROYIANS/foliq-print-template-designer

    Initializes an AI development session by reading workflow guides, developer identity, git status, active tasks, and project guidelines from .trellis/.

    136 GitHub starsUsed in 6 repos~646 tokens
    Agent WorkflowsAuto-check passed
  • Brainstorming Before Building

    jnMetaCode/superpowers-zh

    Turns a rough idea into an approved design before any code is written, sorting the request into spike, bounded or architectural and enforcing an approval gate.

    8.3k GitHub stars~1.8k tokensUpdated 2 days ago
    Agent WorkflowsAuto-check passed

More from popmechanic/VibesOS

  • Factory

    popmechanic/VibesOS

    Self-contained SaaS pipeline — invoke directly, do not decompose.

    136 GitHub stars~3.1k tokensUpdated 2 mo ago
    Auto-check: notes
  • Vibes

    popmechanic/VibesOS

    Self-contained app generator — invoke this skill directly, do not decompose into sub-steps.

    136 GitHub stars~2.6k tokensUpdated 2 mo ago
    Auto-check: notes
  • Cloudflare

    popmechanic/VibesOS

    Self-contained deploy automation — invoke directly, do not decompose.

    136 GitHub stars~1.2k tokensUpdated 2 mo ago
    Auto-check: notes
  • Design

    popmechanic/VibesOS

    Self-contained design transformer — invoke directly, do not decompose.

    136 GitHub stars~2.5k tokensUpdated 2 mo ago
    Auto-check: notes
  • Launch

    popmechanic/VibesOS

    Self-contained SaaS pipeline — invoke directly, do not decompose.

    136 GitHub stars~3k tokensUpdated 2 mo ago
    Auto-check: notes
  • Vibes Brainstorm

    popmechanic/VibesOS

    Lightweight requirements gathering before app generation. An agent skill from popmechanic/VibesOS.

    136 GitHub stars~2.2k tokensUpdated 2 mo ago
    Auto-check passed

Categories

Questions about Riff

What does Riff do?

Self-contained parallel generator — invoke directly, do not decompose. Riff is an agent skill from popmechanic/VibesOS. Self-contained parallel generator — invoke directly, do not decompose.

When should I use Riff?

Riff fits situations like: user says explore options; give me variations; brainstorm approaches; wants to see multiple interpretations of a concept.

How do I install Riff in Claude Code?

Run `npx skills add popmechanic/VibesOS --skill riff -a claude-code`. Or copy the skill folder (skills/riff in popmechanic/VibesOS) into .claude/skills/riff in your project. Claude Code loads it when a task matches its description.

How do I install Riff in Codex?

Run `npx skills add popmechanic/VibesOS --skill riff -a codex`. Or copy the skill folder (skills/riff in popmechanic/VibesOS) into .agents/skills/riff in your project. Codex loads it when a task matches its description.

Can I use Riff in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add popmechanic/VibesOS --skill riff -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/riff, .gemini/skills/riff, .github/skills/riff and .opencode/skills/riff in your project.

What does Riff need to run?

Going by SKILL.md and its folder, Riff needs the command-line tools its instructions call (bun and claude). Its frontmatter pre-approves these tools: Read, Write, Bash, Task, Glob, AskUserQuestion.

Does Riff access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Riff safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Riff use?

Riff is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Riff use?

About 2k tokens (SKILL.md is roughly 8.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Riff?

Skills that share tags, products or a category with Riff: Brainstorming (obra/superpowers, 297k stars), Brainstorming (xpinjection/test-driven-spring-boot, 112 stars), Yao Meta Skill (yaojingang/yao-meta-skill, 2.7k stars) and Typesafe AI (OpenAgentsInc/openagents, 455 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Riff?

popmechanic (a GitHub user) maintains it in popmechanic/VibesOS, which has 136 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on July 27, 2026.

Source: popmechanic/VibesOS on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.