vibes

Plan mode: If you are planning work, this entire skill is ONE plan step: "Invoke /vibes:vibes". Do not decompose the steps below into separate plan tasks.

Display this ASCII art immediately when starting:

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

Quick Navigation

• [Terminal or Editor](#step-0-terminal-or-editor-ui) — Choose how to build (ask first!)
• [Pre-Flight Check](#pre-flight-check) — Validate credentials before coding
• [Core Rules](#core-rules) — Essential guidelines for app generation
• [Generation Process](#generation-process) — Design reasoning and code output
• [Assembly Workflow](#assembly-workflow) — Build the final app
• [UI Style & Theming](#ui-style--theming) — OKLCH colors and design patterns
• [TinyBase Data API](#tinybase-data-api) — Hook reference, patterns, architectures
• [AI Features](#ai-features-optional) — Optional AI integration
• [Bug Prevention](#patterns-that-prevent-bugs) — Quick checklist
• [Extended Docs](#when-to-read-extended-docs) — Reference files for deeper patterns
• [Deployment Options](#deployment-options) — Where to deploy

Vibes DIY App Generator

Generate React web applications using TinyBase for reactive data with real-time sync.

Auth Check (silent — only prompt if needed)

Before asking Terminal or Editor, check for cached auth:

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

• If AUTH_OK → proceed silently to "Terminal or Editor?" (do not mention auth)
• If 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.)"
• If yes:

``bash 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 proceed to "Terminal or Editor?"

• If no → proceed anyway (auth will be needed at deploy time)

Step 0: Terminal or Editor UI?

This is the very first question — ask before anything else (after auth check above). 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 pre-flight checks — 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 Pre-Flight Check or any step below. The editor UI handles the entire workflow — setup, generation, preview, deploy.

Launch the editor server: ``bash 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: `bash 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 step below.

• If Terminal: Continue with the project folder selection and normal generation workflow below.

⛔ EVERYTHING BELOW IS TERMINAL MODE ONLY

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.

Project Folder

Before generating, ask the user where to save the project:

"Where should this project live? Enter a path or press Enter for the default (~/VibesOS/{app-slug}/)."

• If the user provides a path, use it as the project directory
• If they press Enter, use ~/VibesOS/{app-slug}/ (the slug is derived from the prompt later — for now just note the preference)
• Create the directory if it doesn't exist

VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
mkdir -p "$PROJECT_DIR"

After the directory is ready, initialize vibes.json:

bun -e "
  const { initVibesJson } = await import('$VIBES_ROOT/scripts/lib/vibes-json.js');
  initVibesJson('$PROJECT_DIR');
"

Use $PROJECT_DIR as the working directory (cwd) for all subsequent code generation. The generated app.jsx and assembled index.html will be written here.

Pre-Flight Check

Complete these steps before generating any app code.

• Auth is automatic — on first deploy, a browser window opens for Pocket ID login
• Tokens are cached at ~/.vibes/auth.json for subsequent deploys
• Sync infrastructure deploys automatically on first app deploy — no manual setup needed

Read ${CLAUDE_SKILL_DIR}/references/generation-rules.md for platform constraints, core rules, what generated code must/must not contain, generation process, assembly workflow, and the <Markdown> component for rendering formatted text.

Read ${CLAUDE_SKILL_DIR}/references/style-guide.md for OKLCH colors, theming, design token overrides, and visual style patterns.

Read ${CLAUDE_SKILL_DIR}/references/data-api.md for the complete TinyBase hook API reference, data access patterns, user identity, game patterns, reference app, and bug prevention checklist.

When to Read Extended Docs

Read these reference files when the user's prompt matches the signals below:

| Need | Signal in Prompt | Read This | |------|------------------|-----------| | TinyBase data patterns | forms, lists, filtering, ordering, pagination, master-detail | ${CLAUDE_SKILL_DIR}/references/tinybase-patterns.md | | Multiplayer / shared apps | multiplayer, collaborative, shared, multi-user, game with players | ${CLAUDE_SKILL_DIR}/references/multiplayer-guide.md | | Game development | game, timer, countdown, turn-based, score | ${CLAUDE_SKILL_DIR}/references/game-patterns.md | | AI-powered features | AI, chatbot, summarize, generate, openrouter | ${CLAUDE_SKILL_DIR}/references/ai-integration.md | | Bug prevention reference | debugging, troubleshooting, reviewing code | ${CLAUDE_SKILL_DIR}/references/bug-prevention.md | | Design tokens & theming | colors, theme, tokens, brand colors, styling | ${CLAUDE_PLUGIN_ROOT}/build/design-tokens.txt | | Full design system details | detailed design system, spacing, typography | ${CLAUDE_SKILL_DIR}/defaults/style-prompt.txt | | Advanced visual effects | "interactive", "animated", "3D", "particles", "shader", "canvas" | ${CLAUDE_SKILL_DIR}/defaults/advanced-effects-prompt.txt |

Deployment Options

After generating your app, deploy it:

• Cloudflare - Edge deployment with Workers. Use /vibes:cloudflare to deploy.

What's Next?

After generating and assembling the app, present these options using AskUserQuestion:

Question: "Your app is live! Want to turn it into a product? T