vibes

Name: vibes
Author: popmechanic

134stars6forks

How to install vibes?

popmechanic/vibesos/vibes

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

Installs into the current project.

Summary

Self-contained app generator — invoke this skill directly, do not decompose into sub-steps. Generates React web apps with TinyBase reactive data store. Use when creating new web applications, adding components, or working with real-time data. Ideal for quick prototypes and single

Files · 1

View on GitHub

SKILL.md

1	> 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.
2
3	Display this ASCII art immediately when starting:
4
5	```
6	░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░▒▓███████▓▒░░▒▓████████▓▒░░▒▓███████▓▒░
7	░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░
8	░▒▓█▓▒▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░
9	░▒▓█▓▒▒▓█▓▒░░▒▓█▓▒░▒▓███████▓▒░░▒▓██████▓▒░ ░▒▓██████▓▒░
10	░▒▓█▓▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░
11	░▒▓█▓▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ ░▒▓█▓▒░
12	░▒▓██▓▒░ ░▒▓█▓▒░▒▓███████▓▒░░▒▓████████▓▒░▒▓███████▓▒░
13	```
14
15	## Quick Navigation
16
17	- [Terminal or Editor](#step-0-terminal-or-editor-ui) — Choose how to build (ask first!)
18	- [Pre-Flight Check](#pre-flight-check) — Validate credentials before coding
19	- [Core Rules](#core-rules) — Essential guidelines for app generation
20	- [Generation Process](#generation-process) — Design reasoning and code output
21	- [Assembly Workflow](#assembly-workflow) — Build the final app
22	- [UI Style & Theming](#ui-style--theming) — OKLCH colors and design patterns
23	- [TinyBase Data API](#tinybase-data-api) — Hook reference, patterns, architectures
24	- [AI Features](#ai-features-optional) — Optional AI integration
25	- [Bug Prevention](#patterns-that-prevent-bugs) — Quick checklist
26	- [Extended Docs](#when-to-read-extended-docs) — Reference files for deeper patterns
27	- [Deployment Options](#deployment-options) — Where to deploy
28
29	---
30
31	# Vibes DIY App Generator
32
33	Generate React web applications using TinyBase for reactive data with real-time sync.
34
35	## Auth Check (silent — only prompt if needed)
36
37	Before asking Terminal or Editor, check for cached auth:
38
39	```bash
40	VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
41	bun --input-type=module -e "
42	import { readCachedTokens, isTokenExpired } from '$VIBES_ROOT/scripts/lib/cli-auth.js';
43	const tokens = readCachedTokens();
44	if (tokens && !isTokenExpired(tokens.expiresAt)) {
45	console.log('AUTH_OK');
46	} else {
47	console.log('AUTH_NEEDED');
48	}
49	"
50	```
51
52	- If `AUTH_OK` → proceed silently to "Terminal or Editor?" (do not mention auth)
53	- 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.)"
54	- If yes:
55	```bash
56	VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
57	bun --input-type=module -e "
58	import { getAccessToken } from '$VIBES_ROOT/scripts/lib/cli-auth.js';
59	import { OIDC_AUTHORITY, OIDC_CLIENT_ID } from '$VIBES_ROOT/scripts/lib/auth-constants.js';
60	const tokens = await getAccessToken({ authority: OIDC_AUTHORITY, clientId: OIDC_CLIENT_ID });
61	if (tokens) console.log('Signed in successfully!');
62	"
63	```
64	Confirm success, then proceed to "Terminal or Editor?"
65	- If no → proceed anyway (auth will be needed at deploy time)
66
67	---
68
69	## Step 0: Terminal or Editor UI?
70
71	This is the very first question — ask before anything else (after auth check above).
72	Do not check .env, credentials, or project state before asking this question.
73	Do not invoke any other skill before asking this question.
74	If Editor is chosen, skip all pre-flight checks — the editor handles everything.
75
76	Ask the user:
77	> "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)?"
78
79	Present Editor as the first/recommended option.
80
81	- 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.
82
83	Launch the editor server:
84	```bash
85	VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
86	bun "$VIBES_ROOT/scripts/server.ts" --mode=editor --prompt "USER_PROMPT_HERE"
87	```
88	If no prompt was given, omit `--prompt`:
89	```bash
90	VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
91	bun "$VIBES_ROOT/scripts/server.ts" --mode=editor
92	```
93	Tell the user: "Open http://localhost:3333 — the editor handles everything from here."
94	Your job is done. Stop. Do not read further. Do not proceed to any step below.
95
96	- If Terminal: Continue with the project folder selection and normal generation workflow below.
97
98	---
99
100	## ⛔ EVERYTHING BELOW IS TERMINAL MODE ONLY
101
102	**If the user chose Editor above, STOP. Do not read or execute anyt

People who liked this also viewed

6 picks

Type

vibes

134stars6forks

View on GitHub

How to install vibes?

popmechanic/vibesos/vibes

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

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:vibes". 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	## Quick Navigation
16
17	- [Terminal or Editor](#step-0-terminal-or-editor-ui) — Choose how to build (ask first!)
18	- [Pre-Flight Check](#pre-flight-check) — Validate credentials before coding
19	- [Core Rules](#core-rules) — Essential guidelines for app generation
20	- [Generation Process](#generation-process) — Design reasoning and code output
21	- [Assembly Workflow](#assembly-workflow) — Build the final app
22	- [UI Style & Theming](#ui-style--theming) — OKLCH colors and design patterns
23	- [TinyBase Data API](#tinybase-data-api) — Hook reference, patterns, architectures
24	- [AI Features](#ai-features-optional) — Optional AI integration
25	- [Bug Prevention](#patterns-that-prevent-bugs) — Quick checklist
26	- [Extended Docs](#when-to-read-extended-docs) — Reference files for deeper patterns
27	- [Deployment Options](#deployment-options) — Where to deploy
28
29	---
30
31	# Vibes DIY App Generator
32
33	Generate React web applications using TinyBase for reactive data with real-time sync.
34
35	## Auth Check (silent — only prompt if needed)
36
37	Before asking Terminal or Editor, check for cached auth:
38
39	```bash
40	VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
41	bun --input-type=module -e "
42	import { readCachedTokens, isTokenExpired } from '$VIBES_ROOT/scripts/lib/cli-auth.js';
43	const tokens = readCachedTokens();
44	if (tokens && !isTokenExpired(tokens.expiresAt)) {
45	console.log('AUTH_OK');
46	} else {
47	console.log('AUTH_NEEDED');
48	}
49	"
50	```
51
52	- If `AUTH_OK` → proceed silently to "Terminal or Editor?" (do not mention auth)
53	- 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.)"
54	- If yes:
55	```bash
56	VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
57	bun --input-type=module -e "
58	import { getAccessToken } from '$VIBES_ROOT/scripts/lib/cli-auth.js';
59	import { OIDC_AUTHORITY, OIDC_CLIENT_ID } from '$VIBES_ROOT/scripts/lib/auth-constants.js';
60	const tokens = await getAccessToken({ authority: OIDC_AUTHORITY, clientId: OIDC_CLIENT_ID });
61	if (tokens) console.log('Signed in successfully!');
62	"
63	```
64	Confirm success, then proceed to "Terminal or Editor?"
65	- If no → proceed anyway (auth will be needed at deploy time)
66
67	---
68
69	## Step 0: Terminal or Editor UI?
70
71	This is the very first question — ask before anything else (after auth check above).
72	Do not check .env, credentials, or project state before asking this question.
73	Do not invoke any other skill before asking this question.
74	If Editor is chosen, skip all pre-flight checks — the editor handles everything.
75
76	Ask the user:
77	> "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)?"
78
79	Present Editor as the first/recommended option.
80
81	- 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.
82
83	Launch the editor server:
84	```bash
85	VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
86	bun "$VIBES_ROOT/scripts/server.ts" --mode=editor --prompt "USER_PROMPT_HERE"
87	```
88	If no prompt was given, omit `--prompt`:
89	```bash
90	VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
91	bun "$VIBES_ROOT/scripts/server.ts" --mode=editor
92	```
93	Tell the user: "Open http://localhost:3333 — the editor handles everything from here."
94	Your job is done. Stop. Do not read further. Do not proceed to any step below.
95
96	- If Terminal: Continue with the project folder selection and normal generation workflow below.
97
98	---
99
100	## ⛔ EVERYTHING BELOW IS TERMINAL MODE ONLY
101
102	**If the user chose Editor above, STOP. Do not read or execute anyt

People who liked this also viewed

6 picks

Type