protovibe 1.1.9 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +307 -292
- package/dist/index.mjs +81 -42
- package/package.json +51 -52
package/README.md
CHANGED
|
@@ -1,292 +1,307 @@
|
|
|
1
|
-
# ProtoVibe
|
|
2
|
-
|
|
3
|
-
> Vibecode your prototypes.
|
|
4
|
-
|
|
5
|
-
ProtoVibe is a globally installable CLI launchpad built on top of [Claude Code](https://claude.ai/code). It gives you a **structured, guided workflow** for turning a rough idea into a fully scoped, spec'd, and initialized project — before a single line of code is written.
|
|
6
|
-
|
|
7
|
-
It makes **zero AI calls itself**. All intelligence comes from Claude Code, which ProtoVibe launches and drives through a 7-stage workflow. ProtoVibe also **auto-updates itself** every time you run it — you never need to reinstall manually.
|
|
8
|
-
|
|
9
|
-
---
|
|
10
|
-
|
|
11
|
-
## Who is this for?
|
|
12
|
-
|
|
13
|
-
- Developers who want to **go from idea to structured specs** before building
|
|
14
|
-
- Anyone who finds it hard to **think through requirements** clearly on their own
|
|
15
|
-
- Builders who want Claude Code to have a **complete understanding of the project** before writing code
|
|
16
|
-
- Teams who want a **repeatable, consistent project kickoff** process
|
|
17
|
-
|
|
18
|
-
---
|
|
19
|
-
|
|
20
|
-
## Prerequisites
|
|
21
|
-
|
|
22
|
-
Before installing ProtoVibe, make sure you have:
|
|
23
|
-
|
|
24
|
-
- **Node.js v18+** — [nodejs.org](https://nodejs.org)
|
|
25
|
-
- **Claude Code** — install it with:
|
|
26
|
-
```bash
|
|
27
|
-
npm install -g @anthropic-ai/claude-code
|
|
28
|
-
```
|
|
29
|
-
Then run `claude` once and log in. ProtoVibe checks your credentials automatically.
|
|
30
|
-
|
|
31
|
-
---
|
|
32
|
-
|
|
33
|
-
## Install
|
|
34
|
-
|
|
35
|
-
ProtoVibe is a CLI tool and **must be installed globally** to work:
|
|
36
|
-
|
|
37
|
-
```bash
|
|
38
|
-
npm install -g protovibe
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
> **Note:** The npm page shows `npm i protovibe`
|
|
42
|
-
|
|
43
|
-
ProtoVibe checks for newer versions on every run and updates itself automatically. You only ever need to install it once.
|
|
44
|
-
|
|
45
|
-
### No install? Use npx
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
```bash
|
|
50
|
-
npx protovibe
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
This always runs the latest version
|
|
54
|
-
|
|
55
|
-
---
|
|
56
|
-
|
|
57
|
-
## How to use it
|
|
58
|
-
|
|
59
|
-
```bash
|
|
60
|
-
protovibe
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
The boot screen renders instantly. Auth is verified automatically. Then you choose your mode:
|
|
64
|
-
|
|
65
|
-
```
|
|
66
|
-
◆ What would you like to do?
|
|
67
|
-
│ ● Start a new project
|
|
68
|
-
│ ○ Continue with an existing project
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
---
|
|
72
|
-
|
|
73
|
-
## Path A — New project
|
|
74
|
-
|
|
75
|
-
1. **Enter a project name** — letters, numbers, hyphens, underscores only
|
|
76
|
-
2. **Browse to a parent directory** — interactive folder browser starting from your home directory
|
|
77
|
-
3. ProtoVibe creates the project folder and writes the workflow files into it
|
|
78
|
-
4. A launch prompt appears:
|
|
79
|
-
|
|
80
|
-
```
|
|
81
|
-
╭──────────────────────────────────────────╮
|
|
82
|
-
│ │
|
|
83
|
-
│ Claude Code is loading your project. │
|
|
84
|
-
│ │
|
|
85
|
-
│ Type "Hello" or "What's up?" to begin. │
|
|
86
|
-
│ │
|
|
87
|
-
╰──────────────────────────────────────────╯
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
5. Claude Code opens. Type anything — the ProtoVibe workflow starts immediately.
|
|
91
|
-
|
|
92
|
-
### If the project name already exists
|
|
93
|
-
|
|
94
|
-
```
|
|
95
|
-
✗ A project named 'my-app' already exists at this location.
|
|
96
|
-
◆ What would you like to do?
|
|
97
|
-
│ ● Choose a different name for my new project
|
|
98
|
-
│ ○ Continue with the existing project
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
- **Choose a different name** — re-enter the name, same folder stays selected
|
|
102
|
-
- **Continue with the existing project** — ProtoVibe writes the workflow files to the existing folder, Claude opens and starts the workflow fresh
|
|
103
|
-
|
|
104
|
-
---
|
|
105
|
-
|
|
106
|
-
## Path B — Existing project
|
|
107
|
-
|
|
108
|
-
1. **Enter the full path** to your existing project folder (supports `~` shorthand)
|
|
109
|
-
2. ProtoVibe writes an `/analyse` command into the project
|
|
110
|
-
3. Claude Code opens, silently reads all files, and presents a structured summary:
|
|
111
|
-
|
|
112
|
-
```
|
|
113
|
-
Project: my-app
|
|
114
|
-
What it does: A client portal for agencies to manage deliverables and feedback.
|
|
115
|
-
Tech Stack: Next.js, TypeScript, Supabase, Tailwind CSS
|
|
116
|
-
Key Features:
|
|
117
|
-
- Client login and dashboard
|
|
118
|
-
- File upload and approval workflow
|
|
119
|
-
- Comment threads per deliverable
|
|
120
|
-
- Email notifications on status change
|
|
121
|
-
Project Structure: App router in src/app/, shared components in src/components/,
|
|
122
|
-
Supabase client in src/lib/. API routes handle upload and notification logic.
|
|
123
|
-
Current State: Partially built — auth and dashboard complete, approval flow in progress.
|
|
124
|
-
```
|
|
125
|
-
|
|
126
|
-
4. Claude says: *"I've analysed your project. I'm ready to help — what would you like to work on?"*
|
|
127
|
-
5. You drive from here. No workflow constraints — Claude works normally.
|
|
128
|
-
|
|
129
|
-
---
|
|
130
|
-
|
|
131
|
-
## The 7-Stage Workflow (new project path)
|
|
132
|
-
|
|
133
|
-
After Claude opens, type anything. Claude's first response is always:
|
|
134
|
-
|
|
135
|
-
```
|
|
136
|
-
Welcome to ProtoVibe. What would you like to do?
|
|
137
|
-
|
|
138
|
-
1. Build from scratch — start a new project
|
|
139
|
-
2. Work on an existing project — analyse and enhance an existing codebase
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
Choose **1** to begin:
|
|
143
|
-
|
|
144
|
-
### Stage 1 — Idea Capture
|
|
145
|
-
Claude asks: *"Describe the idea for your project."*
|
|
146
|
-
Speak naturally. No format required.
|
|
147
|
-
|
|
148
|
-
### Stage 2 —
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
-
|
|
156
|
-
-
|
|
157
|
-
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
Claude asks
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
-
|
|
178
|
-
-
|
|
179
|
-
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
```
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
```
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
1
|
+
# ProtoVibe
|
|
2
|
+
|
|
3
|
+
> Vibecode your prototypes.
|
|
4
|
+
|
|
5
|
+
ProtoVibe is a globally installable CLI launchpad built on top of [Claude Code](https://claude.ai/code). It gives you a **structured, guided workflow** for turning a rough idea into a fully scoped, spec'd, and initialized project — before a single line of code is written.
|
|
6
|
+
|
|
7
|
+
It makes **zero AI calls itself**. All intelligence comes from Claude Code, which ProtoVibe launches and drives through a 7-stage workflow. ProtoVibe also **auto-updates itself** every time you run it — you never need to reinstall manually.
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## Who is this for?
|
|
12
|
+
|
|
13
|
+
- Developers who want to **go from idea to structured specs** before building
|
|
14
|
+
- Anyone who finds it hard to **think through requirements** clearly on their own
|
|
15
|
+
- Builders who want Claude Code to have a **complete understanding of the project** before writing code
|
|
16
|
+
- Teams who want a **repeatable, consistent project kickoff** process
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## Prerequisites
|
|
21
|
+
|
|
22
|
+
Before installing ProtoVibe, make sure you have:
|
|
23
|
+
|
|
24
|
+
- **Node.js v18+** — [nodejs.org](https://nodejs.org)
|
|
25
|
+
- **Claude Code** — install it with:
|
|
26
|
+
```bash
|
|
27
|
+
npm install -g @anthropic-ai/claude-code
|
|
28
|
+
```
|
|
29
|
+
Then run `claude` once and log in. ProtoVibe checks your credentials automatically.
|
|
30
|
+
|
|
31
|
+
---
|
|
32
|
+
|
|
33
|
+
## Install
|
|
34
|
+
|
|
35
|
+
ProtoVibe is a CLI tool and **must be installed globally** to work:
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npm install -g protovibe
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
> **Note:** The npm page shows `npm i protovibe` — that is a local install and the `protovibe` command will not be found. Always use the `-g` flag.
|
|
42
|
+
|
|
43
|
+
ProtoVibe checks for newer versions on every run and updates itself automatically. You only ever need to install it once.
|
|
44
|
+
|
|
45
|
+
### No install? Use npx
|
|
46
|
+
|
|
47
|
+
Run ProtoVibe directly from any directory without a permanent install:
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
npx protovibe
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
This always fetches and runs the latest version on the fly.
|
|
54
|
+
|
|
55
|
+
---
|
|
56
|
+
|
|
57
|
+
## How to use it
|
|
58
|
+
|
|
59
|
+
```bash
|
|
60
|
+
protovibe
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
The boot screen renders instantly. Auth is verified automatically. Then you choose your mode:
|
|
64
|
+
|
|
65
|
+
```
|
|
66
|
+
◆ What would you like to do?
|
|
67
|
+
│ ● Start a new project
|
|
68
|
+
│ ○ Continue with an existing project
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
## Path A — New project
|
|
74
|
+
|
|
75
|
+
1. **Enter a project name** — letters, numbers, hyphens, underscores only
|
|
76
|
+
2. **Browse to a parent directory** — interactive folder browser starting from your home directory
|
|
77
|
+
3. ProtoVibe creates the project folder and writes the workflow files into it
|
|
78
|
+
4. A launch prompt appears:
|
|
79
|
+
|
|
80
|
+
```
|
|
81
|
+
╭──────────────────────────────────────────╮
|
|
82
|
+
│ │
|
|
83
|
+
│ Claude Code is loading your project. │
|
|
84
|
+
│ │
|
|
85
|
+
│ Type "Hello" or "What's up?" to begin. │
|
|
86
|
+
│ │
|
|
87
|
+
╰──────────────────────────────────────────╯
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
5. Claude Code opens. Type anything — the ProtoVibe workflow starts immediately.
|
|
91
|
+
|
|
92
|
+
### If the project name already exists
|
|
93
|
+
|
|
94
|
+
```
|
|
95
|
+
✗ A project named 'my-app' already exists at this location.
|
|
96
|
+
◆ What would you like to do?
|
|
97
|
+
│ ● Choose a different name for my new project
|
|
98
|
+
│ ○ Continue with the existing project
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
- **Choose a different name** — re-enter the name, same folder stays selected
|
|
102
|
+
- **Continue with the existing project** — ProtoVibe writes the workflow files to the existing folder, Claude opens and starts the workflow fresh
|
|
103
|
+
|
|
104
|
+
---
|
|
105
|
+
|
|
106
|
+
## Path B — Existing project
|
|
107
|
+
|
|
108
|
+
1. **Enter the full path** to your existing project folder (supports `~` shorthand)
|
|
109
|
+
2. ProtoVibe writes an `/analyse` command into the project
|
|
110
|
+
3. Claude Code opens, silently reads all files, and presents a structured summary:
|
|
111
|
+
|
|
112
|
+
```
|
|
113
|
+
Project: my-app
|
|
114
|
+
What it does: A client portal for agencies to manage deliverables and feedback.
|
|
115
|
+
Tech Stack: Next.js, TypeScript, Supabase, Tailwind CSS
|
|
116
|
+
Key Features:
|
|
117
|
+
- Client login and dashboard
|
|
118
|
+
- File upload and approval workflow
|
|
119
|
+
- Comment threads per deliverable
|
|
120
|
+
- Email notifications on status change
|
|
121
|
+
Project Structure: App router in src/app/, shared components in src/components/,
|
|
122
|
+
Supabase client in src/lib/. API routes handle upload and notification logic.
|
|
123
|
+
Current State: Partially built — auth and dashboard complete, approval flow in progress.
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
4. Claude says: *"I've analysed your project. I'm ready to help — what would you like to work on?"*
|
|
127
|
+
5. You drive from here. No workflow constraints — Claude works normally.
|
|
128
|
+
|
|
129
|
+
---
|
|
130
|
+
|
|
131
|
+
## The 7-Stage Workflow (new project path)
|
|
132
|
+
|
|
133
|
+
After Claude opens, type anything. Claude's first response is always:
|
|
134
|
+
|
|
135
|
+
```
|
|
136
|
+
Welcome to ProtoVibe. What would you like to do?
|
|
137
|
+
|
|
138
|
+
1. Build from scratch — start a new project
|
|
139
|
+
2. Work on an existing project — analyse and enhance an existing codebase
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
Choose **1** to begin:
|
|
143
|
+
|
|
144
|
+
### Stage 1 — Idea Capture
|
|
145
|
+
Claude asks: *"Describe the idea for your project."*
|
|
146
|
+
Speak naturally. No format required.
|
|
147
|
+
|
|
148
|
+
### Stage 2 — Interactive Requirements Probing
|
|
149
|
+
|
|
150
|
+
Claude first silently analyses your idea, then asks requirements questions as **interactive cards** — you click an option or type your own. No long-form typing required.
|
|
151
|
+
|
|
152
|
+
Questions are asked in 3 batches:
|
|
153
|
+
|
|
154
|
+
**Batch 1 — Core context**
|
|
155
|
+
- Who are the primary users?
|
|
156
|
+
- What platform is this for? *(Web, Mobile, Desktop, CLI)*
|
|
157
|
+
- Is user authentication required?
|
|
158
|
+
- How would you describe the scale at launch?
|
|
159
|
+
|
|
160
|
+
**Batch 2 — Features & data**
|
|
161
|
+
- What data does this app create or store? *(multi-select)*
|
|
162
|
+
- Any third-party integrations needed? *(multi-select)*
|
|
163
|
+
- Does the app need real-time features?
|
|
164
|
+
|
|
165
|
+
**Batch 3 — Constraints**
|
|
166
|
+
- Do you have a preferred tech stack?
|
|
167
|
+
- What is your timeline for an MVP?
|
|
168
|
+
- Any specific requirements? *(multi-select)*
|
|
169
|
+
|
|
170
|
+
Options are generated from your idea — not generic defaults. Each question has a recommended answer and an "Other" option to type anything.
|
|
171
|
+
|
|
172
|
+
If anything is still unclear after your answers, Claude asks targeted follow-up questions the same way. Then it presents a full structured summary and asks you to confirm before moving on.
|
|
173
|
+
|
|
174
|
+
### Stage 3 — Architecture Options
|
|
175
|
+
|
|
176
|
+
Claude proposes **3 distinct architectural approaches**, each with:
|
|
177
|
+
- Full tech stack (frontend, backend, database, auth, hosting)
|
|
178
|
+
- How the system works end-to-end
|
|
179
|
+
- Tradeoffs — what it's best for and what it sacrifices
|
|
180
|
+
|
|
181
|
+
Then presents them as **clickable cards** — pick one, or choose "Custom approach" to describe your own. The recommended option is labeled clearly.
|
|
182
|
+
|
|
183
|
+
### Stage 4 — Option Confirmation
|
|
184
|
+
If you pick a custom approach, Claude evaluates it against your requirements and flags any risks before proceeding.
|
|
185
|
+
|
|
186
|
+
### Stage 5 — Specs File
|
|
187
|
+
Claude asks for confirmation, then writes `specs.md` in your project root containing:
|
|
188
|
+
- App overview and target audience
|
|
189
|
+
- Feature list with priority labels: **P0** (MVP must-have), **P1** (important), **P2** (nice to have)
|
|
190
|
+
- Complete user flow — every journey, primary and alternate paths
|
|
191
|
+
- Tech stack with one-line justification per technology
|
|
192
|
+
- Data model — entities, fields, relationships
|
|
193
|
+
- Integration notes
|
|
194
|
+
- Constraints and non-functional requirements
|
|
195
|
+
|
|
196
|
+
### Stage 6 — Initialization
|
|
197
|
+
Claude silently replaces the placeholder `CLAUDE.md` with a project-specific one generated by `/init`, so it carries full project context going forward. Nothing is asked — it just happens.
|
|
198
|
+
|
|
199
|
+
### Stage 7 — Handoff
|
|
200
|
+
Claude says: *"Your project is fully scoped and ready to build. Type **Build it** to start building, or ask me anything about the project first."*
|
|
201
|
+
|
|
202
|
+
From here, Claude Code builds your project according to `specs.md`, starting with P0 features.
|
|
203
|
+
|
|
204
|
+
---
|
|
205
|
+
|
|
206
|
+
## Commands
|
|
207
|
+
|
|
208
|
+
These are available at any time inside Claude Code during or after the workflow:
|
|
209
|
+
|
|
210
|
+
| Command | What it does |
|
|
211
|
+
|---|---|
|
|
212
|
+
| `/takeover` | Exit the ProtoVibe workflow. Claude summarises everything captured so far and works normally with no constraints. |
|
|
213
|
+
| `/summarise` | Plain-language summary of progress — what's been decided, what's been done, and what comes next. Capped at 10 bullets. |
|
|
214
|
+
| `/protovibe` | Restart the workflow from Stage 0. |
|
|
215
|
+
|
|
216
|
+
---
|
|
217
|
+
|
|
218
|
+
## Auto-update
|
|
219
|
+
|
|
220
|
+
Every time you run `protovibe`, it silently checks the npm registry. If a newer version is available, it:
|
|
221
|
+
1. Prints: `Updating ProtoVibe x.x.x → x.x.x...`
|
|
222
|
+
2. Installs the latest version globally
|
|
223
|
+
3. Re-launches itself automatically
|
|
224
|
+
|
|
225
|
+
If you're offline, it skips the check and boots normally.
|
|
226
|
+
|
|
227
|
+
---
|
|
228
|
+
|
|
229
|
+
## What gets written to your project
|
|
230
|
+
|
|
231
|
+
### New project
|
|
232
|
+
```
|
|
233
|
+
<your-project>/
|
|
234
|
+
├── CLAUDE.md # Instructs Claude to run the ProtoVibe workflow on first message
|
|
235
|
+
└── .claude/
|
|
236
|
+
└── commands/
|
|
237
|
+
├── protovibe.md # Full 7-stage workflow definition
|
|
238
|
+
├── takeover.md # /takeover command definition
|
|
239
|
+
└── summarise.md # /summarise command definition
|
|
240
|
+
```
|
|
241
|
+
|
|
242
|
+
After Stage 5: `specs.md` is added to the root.
|
|
243
|
+
After Stage 6: `CLAUDE.md` is replaced with a project-specific version by `/init`.
|
|
244
|
+
|
|
245
|
+
### Existing project
|
|
246
|
+
```
|
|
247
|
+
<your-project>/
|
|
248
|
+
├── CLAUDE.md # Instructs Claude to run /analyse on startup
|
|
249
|
+
└── .claude/
|
|
250
|
+
└── commands/
|
|
251
|
+
└── analyse.md # /analyse command — reads all files and presents a summary
|
|
252
|
+
```
|
|
253
|
+
|
|
254
|
+
---
|
|
255
|
+
|
|
256
|
+
## What it looks like
|
|
257
|
+
|
|
258
|
+
Boot screen (renders in under 100ms):
|
|
259
|
+
|
|
260
|
+
```
|
|
261
|
+
██╗ ██╗██╗██████╗ ███████╗██████╗ ██████╗ ██████╗
|
|
262
|
+
██║ ██║██║██╔══██╗██╔════╝██╔══██╗██╔══██╗██╔═══██╗
|
|
263
|
+
██║ ██║██║██████╔╝█████╗ ██████╔╝██████╔╝██║ ██║
|
|
264
|
+
╚██╗ ██╔╝██║██╔══██╗██╔══╝ ██╔═══╝ ██╔══██╗██║ ██║
|
|
265
|
+
╚████╔╝ ██║██████╔╝███████╗██║ ██║ ██║╚██████╔╝
|
|
266
|
+
╚═══╝ ╚═╝╚═════╝ ╚══════╝╚═╝ ╚═╝ ╚═╝ ╚═════╝
|
|
267
|
+
```
|
|
268
|
+
*(rendered in a purple → blue gradient)*
|
|
269
|
+
|
|
270
|
+
```
|
|
271
|
+
╭──────────────────────────────────────────╮
|
|
272
|
+
│ version 1.1.x │
|
|
273
|
+
│ by razorgojo │
|
|
274
|
+
│ powered by Claude Code │
|
|
275
|
+
├──────────────────────────────────────────┤
|
|
276
|
+
│ Vibecode your prototypes. │
|
|
277
|
+
├──────────────────────────────────────────┤
|
|
278
|
+
│ commands │
|
|
279
|
+
│ /exit — quit ProtoVibe at any time │
|
|
280
|
+
╰──────────────────────────────────────────╯
|
|
281
|
+
```
|
|
282
|
+
|
|
283
|
+
The logo automatically switches to a compact version on terminals narrower than 90 columns.
|
|
284
|
+
|
|
285
|
+
---
|
|
286
|
+
|
|
287
|
+
## Development
|
|
288
|
+
|
|
289
|
+
```bash
|
|
290
|
+
git clone https://github.com/SomSamantray/VibePro-CLI.git
|
|
291
|
+
cd VibePro-CLI
|
|
292
|
+
npm install
|
|
293
|
+
npm run build
|
|
294
|
+
node dist/index.mjs # run locally without global install
|
|
295
|
+
npm install -g . # install globally to test the protovibe command
|
|
296
|
+
```
|
|
297
|
+
|
|
298
|
+
| Command | Description |
|
|
299
|
+
|---|---|
|
|
300
|
+
| `npm run build` | Compile TypeScript → `dist/` via tsup |
|
|
301
|
+
| `npm run dev` | Watch mode — rebuilds on every file change |
|
|
302
|
+
|
|
303
|
+
---
|
|
304
|
+
|
|
305
|
+
## License
|
|
306
|
+
|
|
307
|
+
MIT — see [LICENSE](./LICENSE)
|
package/dist/index.mjs
CHANGED
|
@@ -107,10 +107,10 @@ function isClaudeInstalled() {
|
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
109
|
function spawnClaude(projectPath) {
|
|
110
|
-
const
|
|
110
|
+
const claudeCmd = process.platform === "win32" ? "claude.cmd" : "claude";
|
|
111
|
+
const child = spawn(claudeCmd, [], {
|
|
111
112
|
stdio: "inherit",
|
|
112
|
-
cwd: projectPath
|
|
113
|
-
shell: true
|
|
113
|
+
cwd: projectPath
|
|
114
114
|
});
|
|
115
115
|
child.on("error", (err) => {
|
|
116
116
|
process.stderr.write(`Failed to start Claude Code: ${err.message}
|
|
@@ -223,21 +223,29 @@ Your goal is to achieve complete, end-to-end clarity on this product before movi
|
|
|
223
223
|
|
|
224
224
|
**How to probe:**
|
|
225
225
|
|
|
226
|
-
|
|
226
|
+
First, silently analyse the user's idea thoroughly. Identify the most likely platform, user type, auth needs, data requirements, and integrations based on what they described. Use this analysis to generate smart, contextual options for each question \u2014 options should reflect what makes sense for their specific idea, not generic defaults.
|
|
227
227
|
|
|
228
|
-
|
|
228
|
+
Then ask your questions using the **AskUserQuestion tool** in 3 batches. Do not ask as plain text lists \u2014 always use the tool so the user can click options or type their own answer.
|
|
229
229
|
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
- **Data** \u2014 what data is created, stored, read, or deleted? Any real-time or sync requirements?
|
|
236
|
-
- **Integrations** \u2014 any third-party services, APIs, payment systems, or external tools?
|
|
237
|
-
- **Constraints** \u2014 performance targets, offline support, accessibility needs, team size, timeline, existing tech choices the user wants to keep?
|
|
238
|
-
- **Edge cases** \u2014 what happens when things go wrong? Any critical failure states to handle?
|
|
230
|
+
**Batch 1 \u2014 Core context** (call AskUserQuestion with 4 questions):
|
|
231
|
+
1. "Who are the primary users?" \u2014 generate 3 specific, idea-relevant options (e.g. "Freelance designers", "Small business owners", "Developer teams") \u2014 user can type their own via Other
|
|
232
|
+
2. "What platform is this for?" \u2014 options: Web app, Mobile app (iOS/Android), Desktop app, CLI tool \u2014 mark the most likely one as recommended based on the idea
|
|
233
|
+
3. "Is user authentication required?" \u2014 options: Yes \u2013 email & password, Yes \u2013 social login (Google/GitHub/etc.), No login needed, Multiple auth methods
|
|
234
|
+
4. "How would you describe the scale at launch?" \u2014 options: Personal / side project, Small team (under 20 users), Public product (hundreds of users), Enterprise / large scale
|
|
239
235
|
|
|
240
|
-
**
|
|
236
|
+
**Batch 2 \u2014 Features & data** (call AskUserQuestion with 3 questions):
|
|
237
|
+
1. "What data does this app create or store?" \u2014 generate 3\u20134 idea-relevant options (e.g. "User profiles & preferences", "Files or media uploads", "Transactions or records", "Posts or content") \u2014 use multiSelect: true
|
|
238
|
+
2. "Any third-party integrations needed?" \u2014 generate idea-relevant options (e.g. "Stripe \u2013 payments", "SendGrid \u2013 email", "OpenAI \u2013 AI features", "None for now") \u2014 use multiSelect: true
|
|
239
|
+
3. "Does the app need real-time features?" \u2014 options: Yes \u2013 live updates or notifications, Yes \u2013 real-time collaboration, No \u2013 standard request/response is fine, Not sure yet
|
|
240
|
+
|
|
241
|
+
**Batch 3 \u2014 Constraints** (call AskUserQuestion with 3 questions):
|
|
242
|
+
1. "Do you have a preferred tech stack?" \u2014 generate 3 idea-appropriate stack options (e.g. "Next.js full-stack", "React + Node.js", "Python + FastAPI") + "No preference \u2013 recommend something" marked as recommended
|
|
243
|
+
2. "What is your timeline for an MVP?" \u2014 options: ASAP / this week, 2\u20134 weeks, 1\u20133 months, No hard deadline
|
|
244
|
+
3. "Any specific requirements?" \u2014 options: Offline support needed, Accessibility (WCAG) required, Mobile-first design, None of these \u2014 use multiSelect: true
|
|
245
|
+
|
|
246
|
+
After collecting all answers, analyse them carefully. If any critical area is still unclear (feature behaviour, user flow details, edge cases), call AskUserQuestion again with targeted follow-up questions. Keep going until you have the full picture \u2014 there is no question limit.
|
|
247
|
+
|
|
248
|
+
**There is no question limit.** If the user's answers raise new questions, use AskUserQuestion again. Keep going until you have full clarity.
|
|
241
249
|
|
|
242
250
|
When you are confident everything is fully clear, present a complete structured summary:
|
|
243
251
|
|
|
@@ -274,9 +282,13 @@ Analyze the confirmed requirements carefully. Propose exactly **3 distinct archi
|
|
|
274
282
|
|
|
275
283
|
After presenting all 3, clearly mark one as **Recommended** and explain specifically why it fits this user's requirements better than the others.
|
|
276
284
|
|
|
277
|
-
Then
|
|
285
|
+
Then call **AskUserQuestion** with a single question:
|
|
278
286
|
|
|
279
|
-
|
|
287
|
+
- Question: "Which architecture would you like to go with?"
|
|
288
|
+
- Option 1: label = name of Option 1, description = one-line stack summary
|
|
289
|
+
- Option 2: label = name of Option 2, description = one-line stack summary
|
|
290
|
+
- Option 3: label = name of Option 3 + " (Recommended)", description = one-line stack summary + the specific reason it's recommended
|
|
291
|
+
- Option 4: label = "Custom approach", description = "Describe your own stack \u2014 I'll evaluate it against your requirements"
|
|
280
292
|
|
|
281
293
|
---
|
|
282
294
|
|
|
@@ -327,7 +339,7 @@ After writing, tell the user:
|
|
|
327
339
|
|
|
328
340
|
Without asking the user, do the following in order:
|
|
329
341
|
|
|
330
|
-
1.
|
|
342
|
+
1. If a CLAUDE.md file already exists in the current directory, rename it to CLAUDE.md.bak to preserve it. Tell the user: "Backed up existing CLAUDE.md \u2192 CLAUDE.md.bak"
|
|
331
343
|
2. Run /init \u2014 this will analyze the project (including specs.md) and generate a new, project-aware CLAUDE.md
|
|
332
344
|
|
|
333
345
|
The generated CLAUDE.md must contain full, detailed context to help Claude with all future development on this project. /init should produce a CLAUDE.md that includes: the project purpose and scope, the full tech stack with reasoning, the architecture overview, key entities and data relationships, the complete feature set, user flow summary, coding conventions and patterns to follow, known constraints, and any integration details. It should be a complete reference document \u2014 not a summary.
|
|
@@ -336,8 +348,6 @@ After /init completes, confirm:
|
|
|
336
348
|
|
|
337
349
|
> "CLAUDE.md \u2713 \u2014 your project is initialized."
|
|
338
350
|
|
|
339
|
-
Do not mention the deletion to the user. Do not ask permission. Just do it silently.
|
|
340
|
-
|
|
341
351
|
---
|
|
342
352
|
|
|
343
353
|
## Stage 7 \u2014 Handoff
|
|
@@ -520,6 +530,16 @@ async function handleExistingProject() {
|
|
|
520
530
|
process.exit(0);
|
|
521
531
|
}
|
|
522
532
|
const existingPath = resolve(String(rawPath).trim().replace(/^~/, homedir2()));
|
|
533
|
+
const claudeMdPath = join2(existingPath, "CLAUDE.md");
|
|
534
|
+
if (existsSync2(claudeMdPath)) {
|
|
535
|
+
const overwrite = await clack.confirm({
|
|
536
|
+
message: "This project already has a CLAUDE.md. ProtoVibe will replace it to inject its workflow. Overwrite?"
|
|
537
|
+
});
|
|
538
|
+
if (clack.isCancel(overwrite) || !overwrite) {
|
|
539
|
+
clack.cancel("Exiting ProtoVibe. Your CLAUDE.md was not changed.");
|
|
540
|
+
process.exit(0);
|
|
541
|
+
}
|
|
542
|
+
}
|
|
523
543
|
writeAnalyseTemplates(existingPath);
|
|
524
544
|
clack.outro(`\u2713 Ready to analyse ${existingPath}`);
|
|
525
545
|
return existingPath;
|
|
@@ -563,6 +583,16 @@ async function handleNewProject() {
|
|
|
563
583
|
process.exit(0);
|
|
564
584
|
}
|
|
565
585
|
if (conflictChoice === "continue") {
|
|
586
|
+
const claudeMdPath = join2(targetDir, "CLAUDE.md");
|
|
587
|
+
if (existsSync2(claudeMdPath)) {
|
|
588
|
+
const overwrite = await clack.confirm({
|
|
589
|
+
message: "This project already has a CLAUDE.md. Overwrite it with the ProtoVibe configuration?"
|
|
590
|
+
});
|
|
591
|
+
if (clack.isCancel(overwrite) || !overwrite) {
|
|
592
|
+
clack.cancel("Exiting ProtoVibe. Your CLAUDE.md was not changed.");
|
|
593
|
+
process.exit(0);
|
|
594
|
+
}
|
|
595
|
+
}
|
|
566
596
|
writeProtovibeTemplates(targetDir);
|
|
567
597
|
clack.outro(`\u2713 Ready to continue at ${targetDir}`);
|
|
568
598
|
return targetDir;
|
|
@@ -588,7 +618,7 @@ async function scaffoldProject() {
|
|
|
588
618
|
}
|
|
589
619
|
|
|
590
620
|
// src/cli.tsx
|
|
591
|
-
import { confirm } from "@clack/prompts";
|
|
621
|
+
import { confirm as confirm2 } from "@clack/prompts";
|
|
592
622
|
import { spawnSync } from "child_process";
|
|
593
623
|
import chalk from "chalk";
|
|
594
624
|
function printLaunchBox() {
|
|
@@ -633,7 +663,7 @@ function App({ terminalWidth, version }) {
|
|
|
633
663
|
if (stage !== "auth-prompt") return;
|
|
634
664
|
exit();
|
|
635
665
|
(async () => {
|
|
636
|
-
const shouldLogin = await
|
|
666
|
+
const shouldLogin = await confirm2({
|
|
637
667
|
message: "This requires a Claude Code account. Do you want to log in now?"
|
|
638
668
|
});
|
|
639
669
|
if (!shouldLogin) {
|
|
@@ -641,12 +671,13 @@ function App({ terminalWidth, version }) {
|
|
|
641
671
|
process.exit(0);
|
|
642
672
|
}
|
|
643
673
|
process.stdout.write("\n Opening browser to log you in to Claude Code...\n\n");
|
|
644
|
-
const
|
|
674
|
+
const claudeCmd = process.platform === "win32" ? "claude.cmd" : "claude";
|
|
675
|
+
const loginResult = spawnSync(claudeCmd, ["auth", "login"], { stdio: "inherit" });
|
|
645
676
|
if (loginResult.status !== 0 && loginResult.status !== null) {
|
|
646
677
|
process.stdout.write(
|
|
647
678
|
"\n Opening Claude Code to log you in.\n Once logged in, type /exit to return to ProtoVibe.\n\n"
|
|
648
679
|
);
|
|
649
|
-
spawnSync(
|
|
680
|
+
spawnSync(claudeCmd, [], { stdio: "inherit" });
|
|
650
681
|
}
|
|
651
682
|
if (!isAuthenticated()) {
|
|
652
683
|
process.stderr.write("\n\u2717 Not logged in. Run protovibe again after logging in.\n");
|
|
@@ -682,7 +713,6 @@ function App({ terminalWidth, version }) {
|
|
|
682
713
|
}
|
|
683
714
|
|
|
684
715
|
// src/index.tsx
|
|
685
|
-
import { execSync as execSync2, spawnSync as spawnSync2 } from "child_process";
|
|
686
716
|
import { createRequire } from "module";
|
|
687
717
|
import { get } from "https";
|
|
688
718
|
var require2 = createRequire(import.meta.url);
|
|
@@ -702,10 +732,25 @@ function fetchLatestVersion() {
|
|
|
702
732
|
{ timeout: 3e3 },
|
|
703
733
|
(res) => {
|
|
704
734
|
let data = "";
|
|
705
|
-
|
|
735
|
+
let size = 0;
|
|
736
|
+
const MAX_BYTES = 65536;
|
|
737
|
+
res.on("data", (chunk) => {
|
|
738
|
+
size += chunk.length;
|
|
739
|
+
if (size > MAX_BYTES) {
|
|
740
|
+
req.destroy();
|
|
741
|
+
resolve2(null);
|
|
742
|
+
return;
|
|
743
|
+
}
|
|
744
|
+
data += chunk;
|
|
745
|
+
});
|
|
706
746
|
res.on("end", () => {
|
|
707
747
|
try {
|
|
708
|
-
|
|
748
|
+
const version = JSON.parse(data).version;
|
|
749
|
+
if (typeof version === "string" && /^\d+\.\d+\.\d+$/.test(version)) {
|
|
750
|
+
resolve2(version);
|
|
751
|
+
} else {
|
|
752
|
+
resolve2(null);
|
|
753
|
+
}
|
|
709
754
|
} catch {
|
|
710
755
|
resolve2(null);
|
|
711
756
|
}
|
|
@@ -726,21 +771,15 @@ async function main() {
|
|
|
726
771
|
);
|
|
727
772
|
process.exit(1);
|
|
728
773
|
}
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
stdio: "inherit",
|
|
739
|
-
shell: true,
|
|
740
|
-
env: { ...process.env, PROTOVIBE_UPDATED: "1" }
|
|
741
|
-
});
|
|
742
|
-
process.exit(0);
|
|
743
|
-
}
|
|
774
|
+
const latest = await fetchLatestVersion();
|
|
775
|
+
if (latest && isNewerVersion(pkg.version, latest)) {
|
|
776
|
+
process.stdout.write(
|
|
777
|
+
`
|
|
778
|
+
A new version of ProtoVibe is available: ${pkg.version} \u2192 ${latest}
|
|
779
|
+
Run \`npm update -g protovibe\` to update.
|
|
780
|
+
|
|
781
|
+
`
|
|
782
|
+
);
|
|
744
783
|
}
|
|
745
784
|
const terminalWidth = process.stdout.columns ?? 80;
|
|
746
785
|
render(/* @__PURE__ */ React5.createElement(App, { terminalWidth, version: pkg.version }));
|
package/package.json
CHANGED
|
@@ -1,52 +1,51 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "protovibe",
|
|
3
|
-
"version": "1.
|
|
4
|
-
"description": "A branded CLI platform layer on top of Claude Code",
|
|
5
|
-
"author": "razorgojo",
|
|
6
|
-
"license": "MIT",
|
|
7
|
-
"keywords": [
|
|
8
|
-
"claude",
|
|
9
|
-
"claude-code",
|
|
10
|
-
"cli",
|
|
11
|
-
"ai",
|
|
12
|
-
"scaffold",
|
|
13
|
-
"protovibe"
|
|
14
|
-
],
|
|
15
|
-
"engines": {
|
|
16
|
-
"node": ">=18"
|
|
17
|
-
},
|
|
18
|
-
"repository": {
|
|
19
|
-
"type": "git",
|
|
20
|
-
"url": "https://github.com/SomSamantray/VibePro-CLI.git"
|
|
21
|
-
},
|
|
22
|
-
"homepage": "https://github.com/SomSamantray/VibePro-CLI#readme",
|
|
23
|
-
"bugs": {
|
|
24
|
-
"url": "https://github.com/SomSamantray/VibePro-CLI/issues"
|
|
25
|
-
},
|
|
26
|
-
"files": [
|
|
27
|
-
"dist"
|
|
28
|
-
],
|
|
29
|
-
"bin": {
|
|
30
|
-
"protovibe": "dist/index.mjs"
|
|
31
|
-
},
|
|
32
|
-
"main": "dist/index.mjs",
|
|
33
|
-
"type": "module",
|
|
34
|
-
"scripts": {
|
|
35
|
-
"build": "tsup",
|
|
36
|
-
"dev": "tsup --watch",
|
|
37
|
-
"prepublishOnly": "npm run build"
|
|
38
|
-
},
|
|
39
|
-
"dependencies": {
|
|
40
|
-
"@clack/prompts": "^1.1.0",
|
|
41
|
-
"chalk": "^5.6.2",
|
|
42
|
-
"ink": "^6.8.0",
|
|
43
|
-
"
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
"@types/
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "protovibe",
|
|
3
|
+
"version": "1.2.0",
|
|
4
|
+
"description": "A branded CLI platform layer on top of Claude Code",
|
|
5
|
+
"author": "razorgojo",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"claude",
|
|
9
|
+
"claude-code",
|
|
10
|
+
"cli",
|
|
11
|
+
"ai",
|
|
12
|
+
"scaffold",
|
|
13
|
+
"protovibe"
|
|
14
|
+
],
|
|
15
|
+
"engines": {
|
|
16
|
+
"node": ">=18"
|
|
17
|
+
},
|
|
18
|
+
"repository": {
|
|
19
|
+
"type": "git",
|
|
20
|
+
"url": "https://github.com/SomSamantray/VibePro-CLI.git"
|
|
21
|
+
},
|
|
22
|
+
"homepage": "https://github.com/SomSamantray/VibePro-CLI#readme",
|
|
23
|
+
"bugs": {
|
|
24
|
+
"url": "https://github.com/SomSamantray/VibePro-CLI/issues"
|
|
25
|
+
},
|
|
26
|
+
"files": [
|
|
27
|
+
"dist"
|
|
28
|
+
],
|
|
29
|
+
"bin": {
|
|
30
|
+
"protovibe": "dist/index.mjs"
|
|
31
|
+
},
|
|
32
|
+
"main": "dist/index.mjs",
|
|
33
|
+
"type": "module",
|
|
34
|
+
"scripts": {
|
|
35
|
+
"build": "tsup",
|
|
36
|
+
"dev": "tsup --watch",
|
|
37
|
+
"prepublishOnly": "npm run build"
|
|
38
|
+
},
|
|
39
|
+
"dependencies": {
|
|
40
|
+
"@clack/prompts": "^1.1.0",
|
|
41
|
+
"chalk": "^5.6.2",
|
|
42
|
+
"ink": "^6.8.0",
|
|
43
|
+
"react": "^19.2.4"
|
|
44
|
+
},
|
|
45
|
+
"devDependencies": {
|
|
46
|
+
"@types/node": "^25.5.0",
|
|
47
|
+
"@types/react": "^19.2.14",
|
|
48
|
+
"tsup": "^8.5.1",
|
|
49
|
+
"typescript": "^5.9.3"
|
|
50
|
+
}
|
|
51
|
+
}
|