From vibes
Generates Vibes SaaS app with auth, billing, and live deployment via self-contained pipeline using Agent Teams. Use for one-step SaaS shipping or 'launch/ship it' requests.
npx claudepluginhub popmechanic/vibesos --plugin vibesThis skill is limited to using the following tools:
> **Plan mode**: If you are planning work, this entire skill is ONE plan step: "Invoke /vibes:launch". Do not decompose the steps below into separate plan tasks.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
Plan mode: If you are planning work, this entire skill is ONE plan step: "Invoke /vibes:launch". Do not decompose the steps below into separate plan tasks.
Display this ASCII art immediately when starting:
░▒▓█▓▒░ ░▒▓████████▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓███████▓▒░░▒▓██████▓▒ ░▒▓█▓▒░░▒▓█▓▒░
░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░
░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓████████▓▒░
░▒▓█▓▒░ ░▒▓████████▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░
░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░
░▒▓████████▓▒░▒▓█▓▒░░▒▓█▓▒░░▒▓██████▓▒░░▒▓█▓▒░░▒▓█▓▒░░▒▓██████▓▒░▒▓█▓▒░░▒▓█▓▒░
Ask [Header]: "question" means call AskUserQuestion with that header and question. Options listed as bullets. User can always type custom via "Other".
For architecture context, see LAUNCH-REFERENCE.md in this directory.
This is the very first question — ask before anything else. DO NOT check .env, credentials, or project state before asking this question. DO NOT invoke any other skill before asking this question. If Editor is chosen, skip ALL remaining steps — the editor handles everything.
Ask the user:
"How do you want to build? Editor (opens a browser UI with live preview, chat, and deploy button) or Terminal (I'll generate and deploy from here)?"
Present Editor as the first/recommended option.
If Editor: Start the editor server and END YOUR TURN. Do not ask any more questions. Do not continue to Phase 0 or any phase below. The editor UI handles the entire workflow — setup, generation, preview, deploy.
Launch the editor server:
VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
bun "$VIBES_ROOT/scripts/server.ts" --mode=editor --prompt "USER_PROMPT_HERE"
If no prompt was given, omit --prompt:
VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
bun "$VIBES_ROOT/scripts/server.ts" --mode=editor
Tell the user: "Open http://localhost:3333 — the editor handles everything from here." Your job is done. Stop. Do not read further. Do not proceed to any phase below.
If Terminal: Continue with the workflow below.
If the user chose Editor above, STOP. Do not read or execute anything below this line. The editor UI handles setup, generation, preview, and deployment.
Check for cached auth. Editor mode handles auth in the browser, so this only runs for Terminal:
VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
bun --input-type=module -e "
import { readCachedTokens, isTokenExpired } from '$VIBES_ROOT/scripts/lib/cli-auth.js';
const tokens = readCachedTokens();
if (tokens && !isTokenExpired(tokens.expiresAt)) {
console.log('AUTH_OK');
} else {
console.log('AUTH_NEEDED');
}
"
AUTH_OK → proceed silently (do not mention auth)AUTH_NEEDED → ask: "To deploy apps, you'll need a Vibes account. Sign in now? (A browser window will open for Pocket ID — takes about 10 seconds.)"
VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
bun --input-type=module -e "
import { getAccessToken } from '$VIBES_ROOT/scripts/lib/cli-auth.js';
import { OIDC_AUTHORITY, OIDC_CLIENT_ID } from '$VIBES_ROOT/scripts/lib/auth-constants.js';
const tokens = await getAccessToken({ authority: OIDC_AUTHORITY, clientId: OIDC_CLIENT_ID });
if (tokens) console.log('Signed in successfully!');
"
Confirm success, then continue.Only one check before collecting input:
| # | Check | Command | If True |
|---|---|---|---|
| 1 | app.jsx exists | test -f app.jsx | Ask [Reuse]: "app.jsx exists. Reuse it or regenerate?" If reuse: skip T1. |
Auth and deploy credentials are handled automatically — no user setup needed. On first deploy, a browser window opens for Pocket ID login. Tokens are cached at ~/.vibes/auth.json.
Ask [App prompt]: "What do you want to build? Describe the app you have in mind."
Store as appPrompt.
Ask [App name]: "What's the app name? (used for subdomain + database)"
If "Derive from prompt": generate URL-safe slug (lowercase, hyphens, max 30 chars). Store as appName.
Scan appPrompt for AI keywords: "chatbot", "chat with AI", "summarize", "generate", "analyze", "AI-powered", "intelligent".
If detected: Ask [AI features]: "Does this app need AI features?"
If yes: check grep OPENROUTER_API_KEY ~/.vibes/.env. If found, offer reuse (mask key). Otherwise collect via Ask and offer to cache to ~/.vibes/.env. Store as openRouterKey (or null if no AI).
Factory config is collected here but applied later by the assembly script. Do NOT hand-implement SaaS logic — the factory assembly handles tenant routing, auth gating, and billing.
Choose billing mode based on monetization intent:
Always ask the user — do not assume a default.
Ask [Billing]: "What billing mode for your SaaS?" AND [Title]: "App display title?"
Ask [Tagline]: "Describe your app's tagline (short punchy phrase)"
When billing is "required": These fields appear on a pricing section visible to potential customers before signup. Optimize for marketing copy quality — benefit-driven language, not technical descriptions. Tagline = sales headline. Subtitle = value proposition ("why should I pay?"). Features = compelling benefit statements (3-5 items).
Repeat pattern for subtitle and features list (3-5 bullet points).
Store: billingMode ("off"/"required"), appTitle, tagline, subtitle, features (JSON array).
Theme switching is handled by the live preview wrapper, not inside the app. The builder generates a single-theme layout. Set themeCount = 1.
VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
TeamCreate("launch-{appName}", "Full SaaS pipeline for {appName}")${CLAUDE_SKILL_DIR}/prompts/builder.md{appPrompt}, {appName}, {pluginRoot}{aiInstructions}: if openRouterKey is set, add rule about useAI hook (see vibes SKILL.md "AI Features"). If null, leave empty.team_name="launch-{appName}", name="builder", subagent_type="general-purpose"While the builder generates, SaaS config was already collected in Phase 0. Nothing else needs to happen in parallel — no credential collection, no manual setup.
Blocked by T1. Check TaskList until builder completes.
Confirm: app.jsx exists with valid JSX. All factory config values collected.
Scan app.jsx for builder mistakes (see LAUNCH-REFERENCE.md "Common Builder Mistakes"). Fix any found before proceeding.
Ask [Preview]: "Want to preview the app before deploying?"
If yes: run bun "$VIBES_ROOT/scripts/server.ts" and tell the user to open http://localhost:3333. They can chat to iterate on the design and switch themes. When satisfied, stop the server and continue to 2.3.
Step A — Assemble:
VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
bun "$VIBES_ROOT/scripts/assemble-factory.js" app.jsx index.html \
--app-name "{appName}" \
--app-title "{appTitle}" \
--domain "{appName}.vibes.diy" \
--billing-mode "{billingMode}" \
--tagline "{tagline}" \
--subtitle "{subtitle}" \
--features '{featuresJSON}' \
--admin-ids '[]'
Step B — Validate: grep -c '__VITE_\|__OIDC_\|__APP_' index.html — must be 0.
Step C — Deploy:
VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
bun "$VIBES_ROOT/scripts/deploy-cloudflare.js" \
--name "{appName}" \
--file index.html \
{aiKeyFlag}
Where {aiKeyFlag} = --ai-key "{openRouterKey}" if set, omitted if null.
On first deploy, the CLI opens a browser for Pocket ID login. The user signs in once and tokens are cached for future deploys.
Ask [Verify]: "Your app is live! Open each URL and verify:\n\n- Landing: https://{appName}.vibes.diy\n- Tenant: https://{appName}.vibes.diy?subdomain=test\n\nDoes everything look right?"
If broken, ask what's wrong and troubleshoot.
Send shutdown_request to "builder" (if spawned). Wait for response. Clean up team.
## Launch Complete
**App**: {appTitle}
**URL**: https://{appName}.vibes.diy
**Billing**: {billingMode}
### What's deployed:
- Cloudflare Worker via Deploy API
- TinyBase sync via WebSocket + Durable Object (auto-provisioned)
- Pocket ID authentication with passkeys
- Subdomain-based multi-tenancy
### Next steps:
- Sign in at your app URL to become the first user
- Configure admin access via the app settings
- Set up Stripe billing if using subscription mode
| Failure | Recovery |
|---|---|
| Builder generates invalid JSX | Read app.jsx, fix TS syntax / wrong hooks, re-save |
| Assembly has placeholders | Re-run assembly — auth constants are hardcoded, no .env needed |
| Deploy fails (auth) | Delete ~/.vibes/auth.json and retry — browser login will re-open |
| Deploy fails (other) | Check error output from deploy-cloudflare.js |
| Teammate silent 3+ min | SendMessage status check. If no response, take over task |
| Builder hardcodes DB name | Edit app.jsx: replace with useTenant() pattern before assembly |