vibes（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 — Choose how to build (ask first!)
• Pre-Flight Check — Validate credentials before coding
• Core Rules — Essential guidelines for app generation
• Generation Process — Design reasoning and code output
• Assembly Workflow — Build the final app
• UI Style & Theming — OKLCH colors and design patterns
• TinyBase Data API — Hook reference, patterns, architectures
• AI Features — Optional AI integration
• Bug Prevention — Quick checklist
• Extended Docs — Reference files for deeper patterns
• 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: 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: 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 step below.
• If Terminal: Continue with the pre-flight check 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.

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, and assembly workflow.

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:

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? The /sell skill adds multi-tenant SaaS with auth and billing. Or pick another direction:"
Header: "Next"
Options:
- Label: "Keep improving this app"
  Description: "Continue iterating on what you've built. Add new features, refine the styling, or adjust functionality. Great when you have a clear vision and want to polish it further."

- Label: "Apply a design reference (/design)"
  Description: "Have a design.html or mockup file? This skill mechanically transforms your app to match it exactly - pixel-perfect fidelity with your TinyBase data binding preserved."

- Label: "Explore variations (/riff)"
  Description: "Not sure if this is the best approach? Riff generates 3-10 completely different interpretations of your idea in parallel. You'll get ranked variations with business model analysis to help you pick the winner."

- Label: "Make it a SaaS (/sell)"
  Description: "Ready to monetize? Sell transforms your app into a multi-tenant SaaS with Pocket ID authentication, subscription billing, and isolated databases per customer. Each user gets their own subdomain."

- Label: "Deploy to Cloudflare (/cloudflare)"
  Description: "Go live on the edge. Deploy to Cloudflare Workers with a subdomain registry, KV storage, and global CDN. Fast, scalable, and always on."

- Label: "I'm done for now"
  Description: "Wrap up this session. Your files are saved locally - come back anytime to continue."

After user responds:

• "Keep improving" → Acknowledge and stay ready for iteration prompts. After each round of changes to app.jsx, re-run assembly and re-deploy.
• "Apply a design reference" → Auto-invoke /vibes:design skill
• "Explore variations" → Auto-invoke /vibes:riff skill
• "Make it a SaaS" → Auto-invoke /vibes:sell skill
• "Deploy" → Auto-invoke /vibes:cloudflare skill
• "I'm done" → Confirm files saved, wish them well

Do not proceed to code generation until: Pre-flight check is complete (auth is automatic on deploy — no credentials to collect).