sell

Name: sell
Author: popmechanic

134stars6forks

How to install sell?

popmechanic/vibesos/sell

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

Installs into the current project.

Summary

Self-contained SaaS automation — invoke directly, do not decompose. Transforms a Vibes app into a multi-tenant SaaS with subdomain-based tenancy. Adds Pocket ID authentication, subscription gating, and generates a unified app with landing page, tenant routing, and admin dashboard

Files · 1

View on GitHub

SKILL.md

1	> Plan mode: If you are planning work, this entire skill is ONE plan step: "Invoke /vibes:sell". 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	- [Critical Rules](#-critical-rules---read-first-) - Read this first
18	- [Step 1: Pre-Flight Checks](#step-1-pre-flight-checks) - Verify prerequisites
19	- [Step 2: App Identity](#step-2-app-identity) - Set up app name and deploy URL
20	- [Step 3: App Configuration](#step-3-app-configuration) - Collect app settings
21	- [Step 4: Assembly](#step-4-assembly) - Build the unified app
22	- [Step 5: Deployment](#step-5-deployment) - Deploy to Cloudflare Workers
23	- [Step 6: Post-Deploy Verification](#step-6-post-deploy-verification) - Confirm everything works
24	- [Key Components](#key-components) - Routing, TenantContext, SubscriptionGate
25	- [Troubleshooting](#troubleshooting) - Common issues and fixes
26
27	---
28
29	> Assembly: transform (strip) — `assemble-sell.js` receives a vibes-generated app.jsx and adapts it for the sell template. It strips `import` statements, `export default`, React destructuring, and template constants — because the sell template already provides all of these. All dependencies (`React`, TinyBase hooks, `useTenant`, `useState`, etc.) are available as globals.
30
31	## ⛔ CRITICAL RULES - READ FIRST ⛔
32
33	DO NOT generate code manually. This skill uses pre-built scripts:
34
35	\| Step \| Script \| What it does \|
36	\|------\|--------\|--------------\|
37	\| Assembly \| `assemble-sell.js` \| Generates unified index.html \|
38	\| Deploy \| `deploy-cloudflare.js` \| Deploys to Cloudflare Workers with registry \|
39
40	Script location:
41	```bash
42	VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
43	bun "$VIBES_ROOT/scripts/assemble-sell.js" ...
44	bun "$VIBES_ROOT/scripts/deploy-cloudflare.js" ...
45	```
46
47	NEVER do these manually:
48	- ❌ Write HTML/JSX for landing page, tenant app, or admin dashboard
49	- ❌ Generate routing logic or authentication code
50
51	ALWAYS do these:
52	- ✅ Complete pre-flight checks before starting
53	- ✅ Run `assemble-sell.js` to generate the unified app
54	- ✅ Deploy with `deploy-cloudflare.js`
55
56	---
57
58	# Sell - Transform Vibes to SaaS
59
60	This skill uses `assemble-sell.js` to inject the user's app into a pre-built template. The template contains security checks, Pocket ID auth integration, and TinyBase data patterns.
61
62	Convert your Vibes app into a multi-tenant SaaS product with:
63	- Subdomain-based tenancy (alice.yourdomain.com)
64	- Pocket ID authentication (with passkeys, automatic on deploy)
65	- Subscription gating (Stripe billing is phase 2)
66	- Per-tenant data isolation via TinyBase rooms (Durable Objects)
67	- Marketing landing page
68	- Admin dashboard
69
70	## Architecture
71
72	The sell skill generates a single index.html file that handles all routes via client-side subdomain detection:
73
74	```
75	yourdomain.com → Landing page
76	*.yourdomain.com → Tenant app with auth
77	admin.yourdomain.com → Admin dashboard
78	```
79
80	This approach simplifies deployment - you upload one file and it handles everything.
81
82	---
83
84	### Terminal or Editor UI?
85
86	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.
87
88	## Step 1: Pre-Flight Checks
89
90	Before starting, verify these prerequisites. STOP if any check fails.
91
92	### 1.1 Auth Check
93
94	Auth is automatic — on first deploy, a browser window opens for Pocket ID login. Tokens are cached at `~/.vibes/auth.json` for subsequent deploys. No `.env` credential setup is needed.
95
96	### 1.2 Detect Existing App
97
98	```bash
99	ls -la app.jsx 2>/dev/null \|\| echo "NOT_FOUND"
100	```
101
102	If output shows `NOT_FOUND`:
103
104	Check for riff directories:
105	```bash
106	ls -d riff-* 2>/dev/null
107	```
108
109	Decision tree:
110	- Found `app.jsx` → Proceed to Step 2
111	- Found multiple `riff-*/app.jsx` → Ask user to select one, then copy

People who liked this also viewed

6 picks

Type

sell

134stars6forks

View on GitHub

How to install sell?

popmechanic/vibesos/sell

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

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:sell". 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	- [Critical Rules](#-critical-rules---read-first-) - Read this first
18	- [Step 1: Pre-Flight Checks](#step-1-pre-flight-checks) - Verify prerequisites
19	- [Step 2: App Identity](#step-2-app-identity) - Set up app name and deploy URL
20	- [Step 3: App Configuration](#step-3-app-configuration) - Collect app settings
21	- [Step 4: Assembly](#step-4-assembly) - Build the unified app
22	- [Step 5: Deployment](#step-5-deployment) - Deploy to Cloudflare Workers
23	- [Step 6: Post-Deploy Verification](#step-6-post-deploy-verification) - Confirm everything works
24	- [Key Components](#key-components) - Routing, TenantContext, SubscriptionGate
25	- [Troubleshooting](#troubleshooting) - Common issues and fixes
26
27	---
28
29	> Assembly: transform (strip) — `assemble-sell.js` receives a vibes-generated app.jsx and adapts it for the sell template. It strips `import` statements, `export default`, React destructuring, and template constants — because the sell template already provides all of these. All dependencies (`React`, TinyBase hooks, `useTenant`, `useState`, etc.) are available as globals.
30
31	## ⛔ CRITICAL RULES - READ FIRST ⛔
32
33	DO NOT generate code manually. This skill uses pre-built scripts:
34
35	\| Step \| Script \| What it does \|
36	\|------\|--------\|--------------\|
37	\| Assembly \| `assemble-sell.js` \| Generates unified index.html \|
38	\| Deploy \| `deploy-cloudflare.js` \| Deploys to Cloudflare Workers with registry \|
39
40	Script location:
41	```bash
42	VIBES_ROOT="${CLAUDE_PLUGIN_ROOT:-$(dirname "$(dirname "${CLAUDE_SKILL_DIR}")")}"
43	bun "$VIBES_ROOT/scripts/assemble-sell.js" ...
44	bun "$VIBES_ROOT/scripts/deploy-cloudflare.js" ...
45	```
46
47	NEVER do these manually:
48	- ❌ Write HTML/JSX for landing page, tenant app, or admin dashboard
49	- ❌ Generate routing logic or authentication code
50
51	ALWAYS do these:
52	- ✅ Complete pre-flight checks before starting
53	- ✅ Run `assemble-sell.js` to generate the unified app
54	- ✅ Deploy with `deploy-cloudflare.js`
55
56	---
57
58	# Sell - Transform Vibes to SaaS
59
60	This skill uses `assemble-sell.js` to inject the user's app into a pre-built template. The template contains security checks, Pocket ID auth integration, and TinyBase data patterns.
61
62	Convert your Vibes app into a multi-tenant SaaS product with:
63	- Subdomain-based tenancy (alice.yourdomain.com)
64	- Pocket ID authentication (with passkeys, automatic on deploy)
65	- Subscription gating (Stripe billing is phase 2)
66	- Per-tenant data isolation via TinyBase rooms (Durable Objects)
67	- Marketing landing page
68	- Admin dashboard
69
70	## Architecture
71
72	The sell skill generates a single index.html file that handles all routes via client-side subdomain detection:
73
74	```
75	yourdomain.com → Landing page
76	*.yourdomain.com → Tenant app with auth
77	admin.yourdomain.com → Admin dashboard
78	```
79
80	This approach simplifies deployment - you upload one file and it handles everything.
81
82	---
83
84	### Terminal or Editor UI?
85
86	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.
87
88	## Step 1: Pre-Flight Checks
89
90	Before starting, verify these prerequisites. STOP if any check fails.
91
92	### 1.1 Auth Check
93
94	Auth is automatic — on first deploy, a browser window opens for Pocket ID login. Tokens are cached at `~/.vibes/auth.json` for subsequent deploys. No `.env` credential setup is needed.
95
96	### 1.2 Detect Existing App
97
98	```bash
99	ls -la app.jsx 2>/dev/null \|\| echo "NOT_FOUND"
100	```
101
102	If output shows `NOT_FOUND`:
103
104	Check for riff directories:
105	```bash
106	ls -d riff-* 2>/dev/null
107	```
108
109	Decision tree:
110	- Found `app.jsx` → Proceed to Step 2
111	- Found multiple `riff-*/app.jsx` → Ask user to select one, then copy

People who liked this also viewed

6 picks

Type