jettypod 3.0.1
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/.claude/PROTECT_SKILLS.md +28 -0
- package/.claude/settings.json +24 -0
- package/.claude/settings.local.json +16 -0
- package/.claude/skills/epic-discover/SKILL.md +262 -0
- package/.claude/skills/feature-discover/SKILL.md +393 -0
- package/.claude/skills/speed-mode/SKILL.md +364 -0
- package/.claude/skills/stable-mode/SKILL.md +591 -0
- package/.github/workflows/test-safety.yml +85 -0
- package/README.md +25 -0
- package/SPEED-STABLE-AUDIT.md +853 -0
- package/SYSTEM-BEHAVIOR.md +1241 -0
- package/TEST_SAFETY_AUDIT.md +314 -0
- package/TEST_SAFETY_IMPLEMENTATION.md +97 -0
- package/cucumber.js +8 -0
- package/docs/COMMAND_REFERENCE.md +903 -0
- package/docs/DECISIONS.md +68 -0
- package/docs/README.md +48 -0
- package/docs/STANDARDS-SYSTEM-DOCUMENTATION.md +374 -0
- package/docs/TEST-REWRITE-PLAN.md +261 -0
- package/docs/ai-test-writing-requirements.md +219 -0
- package/docs/claude-code-skills.md +607 -0
- package/docs/core-jettypod-methodology/comprehensive-jettypod-methodology.md +582 -0
- package/docs/core-jettypod-methodology/deprecated/jettypod-comprehensive-standards.md +1222 -0
- package/docs/core-jettypod-methodology/deprecated/jettypod-operating-guide.md +3399 -0
- package/docs/core-jettypod-methodology/deprecated/jettypod-technical-checklist.md +1325 -0
- package/docs/core-jettypod-methodology/deprecated/jettypod-vibe-coding-framework.md +1544 -0
- package/docs/core-jettypod-methodology/deprecated/prompt-engineering-guide.md +320 -0
- package/docs/core-jettypod-methodology/deprecated/vibe-coding-cheatsheet (1).md +516 -0
- package/docs/core-jettypod-methodology/deprecated/vibe-coding-framework.md +1544 -0
- package/docs/features/jettypod-standards-explained.md +543 -0
- package/docs/features/standards-inventory.md +257 -0
- package/docs/gap-analysis-current-vs-comprehensive-methodology.md +939 -0
- package/docs/jettypod-system-overview.md +409 -0
- package/features/auto-generate-production-chores.feature +14 -0
- package/features/claude-md-protection/steps.js +487 -0
- package/features/decisions/index.js +490 -0
- package/features/decisions/index.test.js +208 -0
- package/features/git-hooks/git-hooks.feature +30 -0
- package/features/git-hooks/index.js +93 -0
- package/features/git-hooks/index.test.js +137 -0
- package/features/git-hooks/post-commit +56 -0
- package/features/git-hooks/post-merge +47 -0
- package/features/git-hooks/pre-commit +28 -0
- package/features/git-hooks/simple-steps.js +53 -0
- package/features/git-hooks/simple-test.feature +10 -0
- package/features/git-hooks/steps.js +196 -0
- package/features/jettypod-update-command.feature +46 -0
- package/features/mode-prompts/index.js +95 -0
- package/features/mode-prompts/simple-steps.js +44 -0
- package/features/mode-prompts/simple-test.feature +9 -0
- package/features/mode-prompts/validation.test.js +120 -0
- package/features/refactor-mode/steps.js +217 -0
- package/features/refactor-mode.feature +49 -0
- package/features/skills-update/index.test.js +216 -0
- package/features/step_definitions/auto-generate-production-chores.steps.js +162 -0
- package/features/step_definitions/terminal-logo.steps.js +145 -0
- package/features/step_definitions/update-command.steps.js +183 -0
- package/features/terminal-logo/index.js +39 -0
- package/features/terminal-logo/terminal-logo.feature +30 -0
- package/features/update-command/index.js +181 -0
- package/features/update-command/index.test.js +225 -0
- package/features/work-commands/bug-workflow-display.feature +22 -0
- package/features/work-commands/index.js +311 -0
- package/features/work-commands/simple-steps.js +69 -0
- package/features/work-commands/stable-tests.feature +57 -0
- package/features/work-commands/steps.js +1120 -0
- package/features/work-commands/validation.test.js +88 -0
- package/features/work-commands/work-commands.feature +13 -0
- package/features/work-tracking/discovery-validation.test.js +228 -0
- package/features/work-tracking/index.js +1511 -0
- package/features/work-tracking/mode-required.feature +112 -0
- package/features/work-tracking/phase-tracking.test.js +482 -0
- package/features/work-tracking/prototype-tracking.test.js +485 -0
- package/features/work-tracking/tree-view.test.js +310 -0
- package/features/work-tracking/work-set-mode.feature +71 -0
- package/features/work-tracking/work-start-mode.feature +88 -0
- package/full-test.txt +0 -0
- package/install.sh +89 -0
- package/jettypod.js +1640 -0
- package/lib/bug-workflow.js +94 -0
- package/lib/bug-workflow.test.js +177 -0
- package/lib/claudemd.js +130 -0
- package/lib/claudemd.test.js +195 -0
- package/lib/comprehensive-standards-full.json +1778 -0
- package/lib/config.js +181 -0
- package/lib/config.test.js +511 -0
- package/lib/constants.js +107 -0
- package/lib/constants.test.js +164 -0
- package/lib/current-work.js +130 -0
- package/lib/current-work.test.js +146 -0
- package/lib/database-project-config.test.js +107 -0
- package/lib/database.js +256 -0
- package/lib/database.test.js +106 -0
- package/lib/decisions-generator.js +102 -0
- package/lib/decisions-generator.test.js +457 -0
- package/lib/decisions-helpers.js +119 -0
- package/lib/decisions-helpers.test.js +310 -0
- package/lib/discovery-checkpoint.js +83 -0
- package/lib/docs-generator.js +280 -0
- package/lib/external-checklist.js +177 -0
- package/lib/git.js +142 -0
- package/lib/git.test.js +145 -0
- package/lib/logo.js +3 -0
- package/lib/migrations/001-epic-to-parent.js +24 -0
- package/lib/migrations/002-default-work-item-modes.js +37 -0
- package/lib/migrations/002-default-work-item-modes.test.js +351 -0
- package/lib/migrations/003-epic-discovery-fields.js +52 -0
- package/lib/migrations/004-discovery-decisions-table.js +32 -0
- package/lib/migrations/005-migrate-decision-data.js +62 -0
- package/lib/migrations/006-feature-phase-field.js +61 -0
- package/lib/migrations/007-prototype-tracking.js +38 -0
- package/lib/migrations/008-scenario-file-field.js +24 -0
- package/lib/migrations/index.js +74 -0
- package/lib/production-helpers.js +69 -0
- package/lib/project-state.test.js +92 -0
- package/lib/test-helpers.js +184 -0
- package/lib/test-helpers.test.js +255 -0
- package/package.json +36 -0
- package/prototypes/test/index.html +1 -0
- package/setup-dist-repo.sh +68 -0
- package/test-safety-check.sh +80 -0
- package/work-item-tracking-plan.md +199 -0
|
@@ -0,0 +1,3399 @@
|
|
|
1
|
+
# The Vibe Coding Operating System: A Mode-Based Guide
|
|
2
|
+
|
|
3
|
+
## Introduction: Why This Guide Exists
|
|
4
|
+
|
|
5
|
+
A few months into vibe coding, you've probably noticed something: the traditional engineering playbooks don't quite fit. You're not writing code in an IDE, you're having conversations with an AI. You're not debugging with breakpoints, you're debugging with dialogue. You're not a trained engineer, but you're building real applications.
|
|
6
|
+
|
|
7
|
+
This guide bridges that gap. It's specifically designed for the unique reality of building software through conversation with Claude, acknowledging both the superpowers this gives you (incredibly fast prototyping, access to senior-level architectural thinking) and the challenges (knowing when you're over-engineering, making security decisions without years of battle scars).
|
|
8
|
+
|
|
9
|
+
Most importantly, this guide introduces a **mode-based approach** to development. Just like you wouldn't use a sledgehammer to hang a picture frame, you shouldn't use the same development approach for every situation. Sometimes you need to move fast and break things. Sometimes you need to be methodical and careful. Sometimes you just need to figure out what you're even trying to build.
|
|
10
|
+
|
|
11
|
+
The mode you choose depends on two factors: **clarity** (how well you understand what you're building) and **risk** (what happens if you get it wrong). This guide will teach you to recognize which mode you need and how to execute it effectively.
|
|
12
|
+
|
|
13
|
+
## Part I: Foundation
|
|
14
|
+
|
|
15
|
+
### Core Philosophy
|
|
16
|
+
|
|
17
|
+
### Principle 1: Momentum Over Perfection
|
|
18
|
+
|
|
19
|
+
In traditional engineering, the cost of change is high. Bad architecture decisions made early can haunt a project for years. But in vibe coding, refactoring is often just a conversation away. This fundamentally changes the calculus: it's usually better to build something wrong and learn from it than to plan something perfect and never start.
|
|
20
|
+
|
|
21
|
+
**Traditional Approach Example:**
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
Day 1-2: Design database schema
|
|
25
|
+
Day 3-4: Set up development environment
|
|
26
|
+
Day 5-6: Build API layer
|
|
27
|
+
Day 7-8: Create frontend
|
|
28
|
+
Day 9-10: Discover requirements were wrong
|
|
29
|
+
Day 11-15: Refactor everything
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
**Vibe Coding Approach Example:**
|
|
34
|
+
|
|
35
|
+
```
|
|
36
|
+
Hour 1: "Claude, create a working todo app in one file"
|
|
37
|
+
Hour 2: Use it, discover what's actually needed
|
|
38
|
+
Hour 3: "Claude, let's restructure this based on what I learned"
|
|
39
|
+
Hour 4: Have a better app than the traditional Day 15 version
|
|
40
|
+
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
The key insight: in vibe coding, your first version is a conversation, not a commitment.
|
|
44
|
+
|
|
45
|
+
### Principle 2: Claude as Senior Engineer, Not Compiler
|
|
46
|
+
|
|
47
|
+
Don't use Claude like a fancy autocomplete. You're not typing code faster; you're having a technical discussion with an experienced partner. The magic happens when you engage Claude in architectural debates, not when you dictate implementation details.
|
|
48
|
+
|
|
49
|
+
**❌ Bad (Claude as Compiler):**
|
|
50
|
+
"Write a function that loops through an array and returns items where status equals active, use a for loop and push to a new array"
|
|
51
|
+
|
|
52
|
+
**✅ Good (Claude as Senior Engineer):**
|
|
53
|
+
"I need to filter active items from my task list. Currently storing everything in a single array with about 100 items, but might scale to thousands. What's the right approach here? Should I be thinking about indexing strategies?"
|
|
54
|
+
|
|
55
|
+
**✅ Even Better (Claude as Thought Partner):**
|
|
56
|
+
"I'm building a task manager and struggling with performance. Here's my current structure: [paste code]. Users might have thousands of tasks. Should I filter on the client or server? What are the trade-offs?"
|
|
57
|
+
|
|
58
|
+
### Principle 3: Risk-Adjusted Engineering
|
|
59
|
+
|
|
60
|
+
Not all code is created equal. A personal productivity tool has different requirements than a payment processor. This guide helps you match your engineering effort to your actual risks, not hypothetical ones.
|
|
61
|
+
|
|
62
|
+
**Risk Matrix:**
|
|
63
|
+
|
|
64
|
+
- **Low Risk:** Personal use, no sensitive data, can rebuild from scratch
|
|
65
|
+
- Example: Personal bookmark manager, learning projects
|
|
66
|
+
- Approach: Speed Mode, fix problems if they arise
|
|
67
|
+
- **Medium Risk:** Shared with others, some important data, would be painful to lose
|
|
68
|
+
- Example: Team project tracker, small business inventory
|
|
69
|
+
- Approach: Discovery Mode → Speed Mode with checkpoints
|
|
70
|
+
- **High Risk:** Public facing, sensitive data, financial implications, hard to migrate
|
|
71
|
+
- Example: Customer portal, payment processing, healthcare data
|
|
72
|
+
- Approach: Production Mode from day one
|
|
73
|
+
|
|
74
|
+
### Principle 4: Context is Everything
|
|
75
|
+
|
|
76
|
+
Claude's superpower is maintaining complex context across a conversation. Use this strategically. Don't make Claude infer what you're building from fragments - paint the complete picture.
|
|
77
|
+
|
|
78
|
+
**Poor Context:**
|
|
79
|
+
|
|
80
|
+
```
|
|
81
|
+
"Add user authentication"
|
|
82
|
+
[Claude has to guess everything about your app]
|
|
83
|
+
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
**Rich Context:**
|
|
87
|
+
|
|
88
|
+
```
|
|
89
|
+
"I'm adding authentication to my recipe sharing app. Current structure:
|
|
90
|
+
- Next.js frontend with 5 public pages
|
|
91
|
+
- Postgres database with recipes and comments tables
|
|
92
|
+
- Currently all recipes are public
|
|
93
|
+
- Want to let users save favorites and submit recipes
|
|
94
|
+
- About 50 users expected in first month
|
|
95
|
+
What's the pragmatic approach here?"
|
|
96
|
+
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### The Mode Selection Matrix
|
|
100
|
+
|
|
101
|
+
Before diving into any coding session, spend 30 seconds answering these questions to pick your mode:
|
|
102
|
+
|
|
103
|
+
```
|
|
104
|
+
CLARITY CHECK:
|
|
105
|
+
□ Do I know exactly what I'm building?
|
|
106
|
+
□ Do I have clear success criteria?
|
|
107
|
+
□ Have I built something similar before?
|
|
108
|
+
|
|
109
|
+
RISK CHECK:
|
|
110
|
+
□ Will real users depend on this?
|
|
111
|
+
□ Am I handling sensitive/financial data?
|
|
112
|
+
□ Is it hard to fix if I get it wrong?
|
|
113
|
+
|
|
114
|
+
SCORING:
|
|
115
|
+
0-1 "Yes" to risks + Low clarity → Discovery Mode
|
|
116
|
+
0-1 "Yes" to risks + High clarity → Speed Mode
|
|
117
|
+
2-3 "Yes" to risks + High clarity → Production Mode
|
|
118
|
+
2-3 "Yes" to risks + Low clarity → STOP! Discovery first, then Production
|
|
119
|
+
Something is broken → Recovery Mode (always)
|
|
120
|
+
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### Real-World Mode Selection Examples
|
|
124
|
+
|
|
125
|
+
**Scenario 1: "I want to build a workout tracker"**
|
|
126
|
+
|
|
127
|
+
- Clarity: Medium (know the concept, not the details)
|
|
128
|
+
- Risk: Low (just for you)
|
|
129
|
+
- **Mode: Discovery** → Start with an interactive prototype
|
|
130
|
+
|
|
131
|
+
**Scenario 2: "Add Stripe payments to my SaaS"**
|
|
132
|
+
|
|
133
|
+
- Clarity: High (clear requirements from Stripe docs)
|
|
134
|
+
- Risk: High (money + customer data)
|
|
135
|
+
- **Mode: Production** → Careful implementation with security checks
|
|
136
|
+
|
|
137
|
+
**Scenario 3: "My client wants a landing page by tomorrow"**
|
|
138
|
+
|
|
139
|
+
- Clarity: High (they sent mockups)
|
|
140
|
+
- Risk: Low (just marketing content)
|
|
141
|
+
- **Mode: Speed** → Build it fast, polish later if needed
|
|
142
|
+
|
|
143
|
+
**Scenario 4: "Something is corrupting user data"**
|
|
144
|
+
|
|
145
|
+
- Clarity: Low (don't know the cause)
|
|
146
|
+
- Risk: High (active problem)
|
|
147
|
+
- **Mode: Recovery** → Stop the bleeding first
|
|
148
|
+
|
|
149
|
+
## Part II: Use Cases
|
|
150
|
+
|
|
151
|
+
### 1. Starting a New Project
|
|
152
|
+
|
|
153
|
+
This is where most projects succeed or fail. Start wrong, and you'll either over-engineer yourself into paralysis or under-engineer yourself into a corner. The mode-based approach ensures you match your effort to your situation.
|
|
154
|
+
|
|
155
|
+
### 🎯 Quick Decision Tree
|
|
156
|
+
|
|
157
|
+
Answer these in order:
|
|
158
|
+
|
|
159
|
+
1. **"Can I clearly describe what success looks like?"**
|
|
160
|
+
- No → Discovery Mode (figure it out first)
|
|
161
|
+
- Yes → Continue...
|
|
162
|
+
2. **"Will anyone besides me use this in the next month?"**
|
|
163
|
+
- No → Speed Mode (just build it)
|
|
164
|
+
- Yes → Continue...
|
|
165
|
+
3. **"Am I handling money, passwords, or personal data?"**
|
|
166
|
+
- No → Speed Mode with basic auth
|
|
167
|
+
- Yes → Production Mode (no shortcuts)
|
|
168
|
+
|
|
169
|
+
### 🚀 Speed Mode: When You Know What You Want
|
|
170
|
+
|
|
171
|
+
**When to use:**
|
|
172
|
+
|
|
173
|
+
- Personal projects and tools
|
|
174
|
+
- Prototypes and proofs of concept
|
|
175
|
+
- Internal tools with trusted users
|
|
176
|
+
- Learning projects and experiments
|
|
177
|
+
|
|
178
|
+
**The Speed Mode Conversation Flow:**
|
|
179
|
+
|
|
180
|
+
```markdown
|
|
181
|
+
You: "I want to build something to track my personal finances.
|
|
182
|
+
I keep overspending because I don't see where money goes.
|
|
183
|
+
Need to add expenses and see what I spend on categories like food, entertainment.
|
|
184
|
+
How do I start?"
|
|
185
|
+
|
|
186
|
+
Claude: "I'll create a simple expense tracker for you.
|
|
187
|
+
Let me build this as a single-file React app that works immediately.
|
|
188
|
+
You can start using it right away and we'll improve as you discover what you need."
|
|
189
|
+
[Creates working application]
|
|
190
|
+
|
|
191
|
+
You: "This is great! I added a few expenses and realized something -
|
|
192
|
+
I need to track income too, not just spending.
|
|
193
|
+
Can you add that?"
|
|
194
|
+
|
|
195
|
+
Claude: [Extends application]
|
|
196
|
+
|
|
197
|
+
You: "Perfect. Now after using this for a few days, the file is getting long
|
|
198
|
+
and I keep getting lost in the code. Is there a better way to organize this?"
|
|
199
|
+
|
|
200
|
+
Claude: "Yes! Now that we know what features you need,
|
|
201
|
+
let's split this into components. This will make it easier to find things."
|
|
202
|
+
[Refactors into clean structure]
|
|
203
|
+
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
**Real Speed Mode Example: Building a Reading List Tracker**
|
|
207
|
+
|
|
208
|
+
Initial prompt:
|
|
209
|
+
|
|
210
|
+
```markdown
|
|
211
|
+
"Claude, create a reading list tracker. Requirements:
|
|
212
|
+
- Add books with title, author, status (want to read/reading/finished)
|
|
213
|
+
- Mark books as finished with a date
|
|
214
|
+
- See stats (books read this year, currently reading)
|
|
215
|
+
- Use React with local storage
|
|
216
|
+
- Make it look decent with Tailwind
|
|
217
|
+
Single file to start, full functionality"
|
|
218
|
+
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
After getting the initial version:
|
|
222
|
+
|
|
223
|
+
```markdown
|
|
224
|
+
"This is perfect for functionality. Now:
|
|
225
|
+
1. Add a rating system (1-5 stars) for finished books
|
|
226
|
+
2. Show average rating in stats
|
|
227
|
+
3. Let me sort by date finished or rating"
|
|
228
|
+
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
After a few iterations:
|
|
232
|
+
|
|
233
|
+
```markdown
|
|
234
|
+
"I've been using this for a week. Issues I've found:
|
|
235
|
+
- Need to edit books after adding them
|
|
236
|
+
- Want to add notes to books
|
|
237
|
+
- Can we add genres and filter by them?
|
|
238
|
+
Let's refactor this into components first, then add these features"
|
|
239
|
+
|
|
240
|
+
```
|
|
241
|
+
|
|
242
|
+
**Speed Mode Success Signals:**
|
|
243
|
+
|
|
244
|
+
- You have something working within an hour
|
|
245
|
+
- You're actively using it while building it
|
|
246
|
+
- Each iteration takes minutes, not hours
|
|
247
|
+
- You're learning what you actually need by using it
|
|
248
|
+
|
|
249
|
+
**Speed Mode Common Pitfalls:**
|
|
250
|
+
|
|
251
|
+
- 🚫 Starting with "proper" architecture (just build first)
|
|
252
|
+
- 🚫 Worrying about scale (you don't have users yet)
|
|
253
|
+
- 🚫 Adding features you "might" need (YAGNI - You Aren't Gonna Need It)
|
|
254
|
+
- 🚫 Perfectionist CSS before functionality works
|
|
255
|
+
|
|
256
|
+
### 🔍 Discovery Mode: When You're Not Sure
|
|
257
|
+
|
|
258
|
+
**When to use:**
|
|
259
|
+
|
|
260
|
+
- You have a vague idea but unclear execution
|
|
261
|
+
- Exploring technical feasibility
|
|
262
|
+
- Stakeholders can't articulate what they want
|
|
263
|
+
- You're in a new technical domain
|
|
264
|
+
|
|
265
|
+
**The Discovery Mode Conversation Flow:**
|
|
266
|
+
|
|
267
|
+
Discovery Mode is about having a technical conversation that clarifies both WHAT you're building and HOW it should work. It's like pair programming with someone who asks the right questions.
|
|
268
|
+
|
|
269
|
+
**Phase 1: Visual Discovery**
|
|
270
|
+
|
|
271
|
+
```markdown
|
|
272
|
+
You: "I want to build something that helps people track their job applications.
|
|
273
|
+
I keep losing track of where I applied and when to follow up.
|
|
274
|
+
Can you show me what this might look like as an app?"
|
|
275
|
+
|
|
276
|
+
Claude: [Creates interactive HTML/React artifact with kanban board]
|
|
277
|
+
|
|
278
|
+
You: "Oh interesting, I hadn't thought of it like a board with columns.
|
|
279
|
+
I was imagining more like a list or spreadsheet.
|
|
280
|
+
Can you show me that approach instead?"
|
|
281
|
+
|
|
282
|
+
Claude: [Creates alternative visualization as a table/timeline]
|
|
283
|
+
|
|
284
|
+
You: "Hmm, I like parts of both. The columns are good for status,
|
|
285
|
+
but I need to see dates too. Can we somehow combine these?"
|
|
286
|
+
|
|
287
|
+
Claude: [Creates hybrid approach]
|
|
288
|
+
|
|
289
|
+
You: "YES! This is clicking now. But wait, how would I add a new job?
|
|
290
|
+
And where would I put notes from interviews?"
|
|
291
|
+
|
|
292
|
+
Claude: [Adds these features to the prototype, revealing new questions]
|
|
293
|
+
|
|
294
|
+
```
|
|
295
|
+
|
|
296
|
+
**Phase 2: Requirement Extraction**
|
|
297
|
+
|
|
298
|
+
```markdown
|
|
299
|
+
You: "Based on what we've designed, write a README that describes this app
|
|
300
|
+
as if it already exists. Include user stories and key features."
|
|
301
|
+
|
|
302
|
+
Claude: [Creates comprehensive README]
|
|
303
|
+
|
|
304
|
+
You: "The README mentions email reminders. That seems complex.
|
|
305
|
+
What would MVP look like without that?"
|
|
306
|
+
|
|
307
|
+
Claude: [Adjusts scope and complexity]
|
|
308
|
+
|
|
309
|
+
```
|
|
310
|
+
|
|
311
|
+
**Phase 3: Technical Discovery**
|
|
312
|
+
|
|
313
|
+
```markdown
|
|
314
|
+
You: "OK so we know what we're building.
|
|
315
|
+
But I don't know how to structure this as actual code.
|
|
316
|
+
Like, where does the data live? How do the different parts connect?
|
|
317
|
+
What are my options here?"
|
|
318
|
+
|
|
319
|
+
Claude: "Let me explain a few different approaches:
|
|
320
|
+
1. Single-file app with browser storage (simplest)
|
|
321
|
+
2. Frontend + database (more robust)
|
|
322
|
+
3. Separate frontend and backend (most flexible)
|
|
323
|
+
Here are the trade-offs... [explains each]"
|
|
324
|
+
|
|
325
|
+
You: "I don't really understand the difference between 2 and 3.
|
|
326
|
+
Also, what's browser storage? Is that safe?"
|
|
327
|
+
|
|
328
|
+
Claude: [Explains in simpler terms with pros/cons]
|
|
329
|
+
|
|
330
|
+
You: "Got it. Let's go with the simple option for now.
|
|
331
|
+
But what problems might I run into?
|
|
332
|
+
I don't want to build this then have to start over."
|
|
333
|
+
|
|
334
|
+
Claude: "Good question! With browser storage you might hit these limits:
|
|
335
|
+
- Data only exists on that one computer
|
|
336
|
+
- Clearing browser data loses everything
|
|
337
|
+
- Can't sync between devices
|
|
338
|
+
But these are fine for personal use and we can migrate later if needed."
|
|
339
|
+
|
|
340
|
+
You: "Perfect, I understand the trade-offs now. Let's build it!"
|
|
341
|
+
|
|
342
|
+
```
|
|
343
|
+
|
|
344
|
+
**Phase 4: Build the Simplest Thing**
|
|
345
|
+
|
|
346
|
+
```markdown
|
|
347
|
+
You: "Now build just the core workflow: add a job, move through stages,
|
|
348
|
+
mark as rejected/accepted. Ignore everything else."
|
|
349
|
+
|
|
350
|
+
Claude: [Builds focused MVP]
|
|
351
|
+
|
|
352
|
+
```
|
|
353
|
+
|
|
354
|
+
**Real Discovery Mode Example: Building a Team Standup Tool**
|
|
355
|
+
|
|
356
|
+
Starting vague:
|
|
357
|
+
|
|
358
|
+
```markdown
|
|
359
|
+
You: "My remote team's standups are chaotic.
|
|
360
|
+
I want something better than Slack threads but simpler than Jira.
|
|
361
|
+
Show me what this might look like."
|
|
362
|
+
|
|
363
|
+
Claude: [Creates interactive mockup with update forms and team view]
|
|
364
|
+
|
|
365
|
+
You: "This is too synchronous. What if people are in different timezones?"
|
|
366
|
+
|
|
367
|
+
Claude: [Adjusts to async model with time windows]
|
|
368
|
+
|
|
369
|
+
You: "I'm seeing now this is really about accountability, not real-time updates.
|
|
370
|
+
Can you pivot this to focus on commitments and follow-through?"
|
|
371
|
+
|
|
372
|
+
Claude: [Recreates with commitment tracking focus]
|
|
373
|
+
|
|
374
|
+
You: "YES! This is it. Now write up what we've discovered as requirements."
|
|
375
|
+
|
|
376
|
+
```
|
|
377
|
+
|
|
378
|
+
After several iterations, you discover you're not building a standup tool at all - you're building a team commitment tracker. This is the power of Discovery Mode.
|
|
379
|
+
|
|
380
|
+
**Discovery Mode Success Signals:**
|
|
381
|
+
|
|
382
|
+
- Your understanding crystallizes through iteration
|
|
383
|
+
- The 3rd version looks nothing like the 1st
|
|
384
|
+
- You say "Oh, I didn't think of that" multiple times
|
|
385
|
+
- You discover the real problem you're solving
|
|
386
|
+
|
|
387
|
+
**Discovery Mode to Speed Mode Transition:**
|
|
388
|
+
|
|
389
|
+
Once you achieve clarity through Discovery Mode, switch to Speed Mode:
|
|
390
|
+
|
|
391
|
+
```markdown
|
|
392
|
+
You: "Perfect, now I know exactly what we're building.
|
|
393
|
+
Take everything we learned and build the simplest working version.
|
|
394
|
+
Focus only on [core feature] first."
|
|
395
|
+
|
|
396
|
+
```
|
|
397
|
+
|
|
398
|
+
### 🛠️ Production Mode: When It Has to Be Right
|
|
399
|
+
|
|
400
|
+
**When to use:**
|
|
401
|
+
|
|
402
|
+
- Handling real user data from day one
|
|
403
|
+
- Financial transactions or sensitive information
|
|
404
|
+
- Public-facing applications with SLAs
|
|
405
|
+
- Replacing existing systems (migration risk)
|
|
406
|
+
|
|
407
|
+
Production Mode isn't about building everything perfectly - it's about not making mistakes that are expensive to fix later.
|
|
408
|
+
|
|
409
|
+
**The Production Mode Conversation Flow:**
|
|
410
|
+
|
|
411
|
+
**Phase 1: Architecture and Security Review**
|
|
412
|
+
|
|
413
|
+
```markdown
|
|
414
|
+
You: "I'm building a medical appointment scheduler for a 50-person clinic.
|
|
415
|
+
They currently use paper and phone calls.
|
|
416
|
+
It needs to handle patient info, doctor schedules, and appointments.
|
|
417
|
+
This feels serious - what do I need to worry about?"
|
|
418
|
+
|
|
419
|
+
Claude: "This is definitely Production Mode territory. Medical data means:
|
|
420
|
+
- HIPAA compliance requirements (patient privacy laws)
|
|
421
|
+
- Need for audit trails (who accessed what when)
|
|
422
|
+
- Data encryption requirements
|
|
423
|
+
- Backup and recovery critical
|
|
424
|
+
|
|
425
|
+
Let's start with the architecture. Here are the critical decisions..."
|
|
426
|
+
|
|
427
|
+
You: "HIPAA? I don't know what that means for my code.
|
|
428
|
+
Can you explain what I actually need to do differently?"
|
|
429
|
+
|
|
430
|
+
Claude: [Explains specific technical requirements in plain terms]
|
|
431
|
+
|
|
432
|
+
You: "This sounds overwhelming. What if I mess something up?
|
|
433
|
+
What are the absolute must-haves vs nice-to-haves?"
|
|
434
|
+
|
|
435
|
+
Claude: "Let's focus on the critical three:
|
|
436
|
+
1. Use a reputable auth service (don't build your own)
|
|
437
|
+
2. Use encrypted database connections
|
|
438
|
+
3. Log who accesses patient records
|
|
439
|
+
We can add more sophisticated features later."
|
|
440
|
+
|
|
441
|
+
You: "OK that seems manageable. What would happen if we didn't do these things?"
|
|
442
|
+
|
|
443
|
+
Claude: [Explains real risks in understandable terms]
|
|
444
|
+
|
|
445
|
+
```
|
|
446
|
+
|
|
447
|
+
**Phase 2: Foundation Before Features**
|
|
448
|
+
|
|
449
|
+
```markdown
|
|
450
|
+
You: "Let's build the foundation. Start with:
|
|
451
|
+
1. Project structure with clear separation of concerns
|
|
452
|
+
2. Authentication setup using [Auth provider]
|
|
453
|
+
3. Database schema with migrations
|
|
454
|
+
4. Error handling and logging structure
|
|
455
|
+
5. Basic CI/CD setup
|
|
456
|
+
|
|
457
|
+
No features yet, just the skeleton."
|
|
458
|
+
|
|
459
|
+
Claude: [Creates robust foundation]
|
|
460
|
+
|
|
461
|
+
```
|
|
462
|
+
|
|
463
|
+
**Phase 3: Test-Driven Feature Development**
|
|
464
|
+
|
|
465
|
+
```markdown
|
|
466
|
+
You: "Now let's add the first feature: patient registration.
|
|
467
|
+
Start by writing tests that define the expected behavior."
|
|
468
|
+
|
|
469
|
+
Claude: [Writes comprehensive tests]
|
|
470
|
+
|
|
471
|
+
You: "Implement the feature to pass these tests.
|
|
472
|
+
Include input validation and error handling."
|
|
473
|
+
|
|
474
|
+
Claude: [Implements with proper safeguards]
|
|
475
|
+
|
|
476
|
+
```
|
|
477
|
+
|
|
478
|
+
**Real Production Mode Example: Building a Customer Portal**
|
|
479
|
+
|
|
480
|
+
Initial setup:
|
|
481
|
+
|
|
482
|
+
```markdown
|
|
483
|
+
You: "Building a customer portal for a B2B SaaS.
|
|
484
|
+
Customers will upload contracts, view invoices, manage users.
|
|
485
|
+
Currently 100 customers, growing to 1000 next year.
|
|
486
|
+
|
|
487
|
+
Critical requirements:
|
|
488
|
+
- SOC 2 compliance needed
|
|
489
|
+
- Single sign-on with existing auth
|
|
490
|
+
- Document storage with versioning
|
|
491
|
+
- Audit trail for all actions
|
|
492
|
+
|
|
493
|
+
What's our architecture?"
|
|
494
|
+
|
|
495
|
+
Claude: [Provides detailed architecture with security layers]
|
|
496
|
+
|
|
497
|
+
You: "I'm concerned about the document storage.
|
|
498
|
+
Compare S3 vs database vs hybrid approach.
|
|
499
|
+
Consider cost, complexity, and backup strategies."
|
|
500
|
+
|
|
501
|
+
Claude: [Detailed comparison with recommendation]
|
|
502
|
+
|
|
503
|
+
You: "Let's go with S3 + metadata in database.
|
|
504
|
+
Create the initial structure with proper separation.
|
|
505
|
+
Include example environment configs for local/staging/prod."
|
|
506
|
+
|
|
507
|
+
Claude: [Creates production-ready foundation]
|
|
508
|
+
|
|
509
|
+
```
|
|
510
|
+
|
|
511
|
+
Security checkpoint:
|
|
512
|
+
|
|
513
|
+
```markdown
|
|
514
|
+
You: "Before we proceed, audit this setup for security issues.
|
|
515
|
+
Check specifically for:
|
|
516
|
+
- OWASP top 10 vulnerabilities
|
|
517
|
+
- AWS S3 misconfiguration risks
|
|
518
|
+
- Authentication bypass possibilities
|
|
519
|
+
- Data leak scenarios"
|
|
520
|
+
|
|
521
|
+
Claude: [Performs security review with specific recommendations]
|
|
522
|
+
|
|
523
|
+
```
|
|
524
|
+
|
|
525
|
+
**Production Mode Success Signals:**
|
|
526
|
+
|
|
527
|
+
- You could hand this to another developer
|
|
528
|
+
- Security is baked in, not bolted on
|
|
529
|
+
- Every feature has error handling
|
|
530
|
+
- There's a clear deployment strategy
|
|
531
|
+
- You sleep well knowing it's running
|
|
532
|
+
|
|
533
|
+
**Production Mode Checklist:**
|
|
534
|
+
|
|
535
|
+
```markdown
|
|
536
|
+
Before Starting:
|
|
537
|
+
□ Architecture documented and reviewed
|
|
538
|
+
□ Security threats identified and addressed
|
|
539
|
+
□ Data backup and recovery plan
|
|
540
|
+
□ Error handling strategy defined
|
|
541
|
+
□ Monitoring approach decided
|
|
542
|
+
|
|
543
|
+
For Each Feature:
|
|
544
|
+
□ Tests written first
|
|
545
|
+
□ Input validation comprehensive
|
|
546
|
+
□ Error cases handled gracefully
|
|
547
|
+
□ Security implications considered
|
|
548
|
+
□ Database migrations reversible
|
|
549
|
+
□ Feature flag for rollback
|
|
550
|
+
|
|
551
|
+
Before Deploy:
|
|
552
|
+
□ Security scan performed
|
|
553
|
+
□ Load testing completed (if applicable)
|
|
554
|
+
□ Rollback plan documented
|
|
555
|
+
□ Monitoring alerts configured
|
|
556
|
+
□ Documentation updated
|
|
557
|
+
|
|
558
|
+
```
|
|
559
|
+
|
|
560
|
+
### 🚨 Recovery Mode: When Things Are Broken
|
|
561
|
+
|
|
562
|
+
Recovery Mode is special - it's not about building, it's about fixing. Speed is important, but not at the cost of making things worse.
|
|
563
|
+
|
|
564
|
+
**When to use:**
|
|
565
|
+
|
|
566
|
+
- Production is down
|
|
567
|
+
- Data corruption is occurring
|
|
568
|
+
- Users are experiencing critical bugs
|
|
569
|
+
- You inherited a broken codebase
|
|
570
|
+
- A deployment went wrong
|
|
571
|
+
|
|
572
|
+
**The Recovery Mode Protocol:**
|
|
573
|
+
|
|
574
|
+
**Step 1: Stop the Bleeding**
|
|
575
|
+
|
|
576
|
+
```markdown
|
|
577
|
+
You: "HELP! Users are saying their data disappears when they save.
|
|
578
|
+
Started this morning. I deployed some changes yesterday.
|
|
579
|
+
I don't understand what's happening.
|
|
580
|
+
The app seems to work fine when I test it."
|
|
581
|
+
|
|
582
|
+
Claude: "Let's stop the data loss immediately first, then figure out why.
|
|
583
|
+
Can you show me:
|
|
584
|
+
1. Any error messages from your logs?
|
|
585
|
+
2. What changes you deployed yesterday?
|
|
586
|
+
Let's add a temporary safety check..."
|
|
587
|
+
|
|
588
|
+
You: "Here's what I see in the logs: [paste error]
|
|
589
|
+
I don't understand what this error means though."
|
|
590
|
+
|
|
591
|
+
Claude: "This error means [explanation]. Here's an immediate fix
|
|
592
|
+
to stop data loss. It might make saves slower but will protect user data."
|
|
593
|
+
|
|
594
|
+
You: "OK I added that code. How do I know if it worked?
|
|
595
|
+
And is it safe to leave this while we figure out the real problem?"
|
|
596
|
+
|
|
597
|
+
Claude: [Confirms fix and assesses temporary solution]
|
|
598
|
+
|
|
599
|
+
```
|
|
600
|
+
|
|
601
|
+
**Step 2: Understand What Happened**
|
|
602
|
+
|
|
603
|
+
```markdown
|
|
604
|
+
You: "OK, crisis averted. Let's understand what happened.
|
|
605
|
+
Here's the code that was deployed: [paste diff]
|
|
606
|
+
Here's what the data looks like: [paste sample]
|
|
607
|
+
What caused the data loss?"
|
|
608
|
+
|
|
609
|
+
Claude: [Analyzes root cause]
|
|
610
|
+
|
|
611
|
+
```
|
|
612
|
+
|
|
613
|
+
**Step 3: Implement Proper Fix**
|
|
614
|
+
|
|
615
|
+
```markdown
|
|
616
|
+
You: "Now let's fix this properly.
|
|
617
|
+
Requirements:
|
|
618
|
+
- Restore lost data if possible
|
|
619
|
+
- Fix the root cause
|
|
620
|
+
- Prevent this from happening again
|
|
621
|
+
What's the safest approach?"
|
|
622
|
+
|
|
623
|
+
Claude: [Provides restoration and fix strategy]
|
|
624
|
+
|
|
625
|
+
```
|
|
626
|
+
|
|
627
|
+
**Step 4: Prevent Recurrence**
|
|
628
|
+
|
|
629
|
+
```markdown
|
|
630
|
+
You: "What tests/monitoring would have caught this before users noticed?"
|
|
631
|
+
|
|
632
|
+
Claude: [Provides prevention strategy]
|
|
633
|
+
|
|
634
|
+
```
|
|
635
|
+
|
|
636
|
+
**Real Recovery Mode Example: Inherited Mess**
|
|
637
|
+
|
|
638
|
+
Different type of recovery - not urgent but needs fixing:
|
|
639
|
+
|
|
640
|
+
```markdown
|
|
641
|
+
You: "I inherited this codebase from someone who left.
|
|
642
|
+
It works but it's really hard to understand or change anything.
|
|
643
|
+
Every time I try to add something, three other things break.
|
|
644
|
+
Here's the structure: [paste file tree]
|
|
645
|
+
Can you help me understand what I'm dealing with?"
|
|
646
|
+
|
|
647
|
+
Claude: "I can see several issues that are making this hard to work with:
|
|
648
|
+
- There are passwords and API keys written directly in the code (security risk!)
|
|
649
|
+
- One file has 5000+ lines (extremely hard to navigate)
|
|
650
|
+
- Functions are doing too many things at once
|
|
651
|
+
- No consistent patterns between different parts
|
|
652
|
+
Let's start with the most critical issue - those exposed passwords."
|
|
653
|
+
|
|
654
|
+
You: "Oh no, I didn't realize passwords in code were bad!
|
|
655
|
+
What should I do about that?"
|
|
656
|
+
|
|
657
|
+
Claude: [Explains environment variables and provides migration strategy]
|
|
658
|
+
|
|
659
|
+
You: "OK I think I fixed the password thing.
|
|
660
|
+
Now what about that huge file you mentioned?
|
|
661
|
+
I can barely scroll through it without getting lost."
|
|
662
|
+
|
|
663
|
+
Claude: [Provides strategy to safely break up the large file]
|
|
664
|
+
|
|
665
|
+
You: "This is helping! Are there other problems I should know about?
|
|
666
|
+
I don't know what to look for."
|
|
667
|
+
|
|
668
|
+
Claude: [Identifies other issues and prioritizes fixes]
|
|
669
|
+
|
|
670
|
+
```
|
|
671
|
+
|
|
672
|
+
**Recovery Mode Mantras:**
|
|
673
|
+
|
|
674
|
+
- First, do no harm
|
|
675
|
+
- Make it work, then make it right
|
|
676
|
+
- One problem at a time
|
|
677
|
+
- Test the fix in isolation
|
|
678
|
+
- Document what you learn
|
|
679
|
+
|
|
680
|
+
### Mode Transitions: Recognizing When to Switch
|
|
681
|
+
|
|
682
|
+
One of the most important skills in vibe coding is recognizing when you need to change modes. Here are the key signals:
|
|
683
|
+
|
|
684
|
+
### Speed → Discovery: "I Don't Know What I'm Building Anymore"
|
|
685
|
+
|
|
686
|
+
**Signals:**
|
|
687
|
+
|
|
688
|
+
- You keep changing fundamental features
|
|
689
|
+
- Every conversation starts with "Actually, wait..."
|
|
690
|
+
- You're building features then immediately deleting them
|
|
691
|
+
- The codebase is becoming incoherent
|
|
692
|
+
|
|
693
|
+
**Example Transition:**
|
|
694
|
+
|
|
695
|
+
```markdown
|
|
696
|
+
You: "I've been adding features to this task manager for two weeks.
|
|
697
|
+
Now I have tags, projects, areas, contexts, priorities...
|
|
698
|
+
I don't even know what this is anymore.
|
|
699
|
+
Can you help me figure out what I'm actually trying to build?"
|
|
700
|
+
|
|
701
|
+
[Switch to Discovery Mode to clarify vision]
|
|
702
|
+
|
|
703
|
+
```
|
|
704
|
+
|
|
705
|
+
### Discovery → Speed: "Now I Know Exactly What I Want"
|
|
706
|
+
|
|
707
|
+
**Signals:**
|
|
708
|
+
|
|
709
|
+
- You can describe the core feature in one sentence
|
|
710
|
+
- You've stopped exploring alternatives
|
|
711
|
+
- You're excited to build specific features
|
|
712
|
+
- The requirements feel stable
|
|
713
|
+
|
|
714
|
+
**Example Transition:**
|
|
715
|
+
|
|
716
|
+
```markdown
|
|
717
|
+
You: "After those prototypes, I'm clear: it's a habit tracker,
|
|
718
|
+
not a task manager. Forget all the complex stuff.
|
|
719
|
+
Just habits, streaks, and a simple daily view.
|
|
720
|
+
Let's build this fast and simple."
|
|
721
|
+
|
|
722
|
+
[Switch to Speed Mode to build quickly]
|
|
723
|
+
|
|
724
|
+
```
|
|
725
|
+
|
|
726
|
+
### Speed → Production: "People Are Depending on This"
|
|
727
|
+
|
|
728
|
+
**Signals:**
|
|
729
|
+
|
|
730
|
+
- Real users are asking for accounts
|
|
731
|
+
- You're handling sensitive data
|
|
732
|
+
- Bugs would affect others, not just you
|
|
733
|
+
- You need reliable deployments
|
|
734
|
+
|
|
735
|
+
**Example Transition:**
|
|
736
|
+
|
|
737
|
+
```markdown
|
|
738
|
+
You: "My personal budget tracker worked so well that my family wants to use it.
|
|
739
|
+
Right now it's just one shared version on my computer.
|
|
740
|
+
They want their own accounts and data.
|
|
741
|
+
I'm nervous about messing this up - it's not just for me anymore."
|
|
742
|
+
|
|
743
|
+
Claude: "Good instinct! This is a perfect time to switch to Production Mode.
|
|
744
|
+
We need to:
|
|
745
|
+
1. Add proper user authentication (not build it ourselves)
|
|
746
|
+
2. Separate each user's data
|
|
747
|
+
3. Add data backups
|
|
748
|
+
4. Handle errors gracefully
|
|
749
|
+
Let's rebuild the critical parts properly before adding more users."
|
|
750
|
+
|
|
751
|
+
You: "That sounds like a lot. Do we need all of that right away?"
|
|
752
|
+
|
|
753
|
+
Claude: "Let's start with the absolute essentials for multi-user:
|
|
754
|
+
- Authentication (using a service like Clerk or Auth0)
|
|
755
|
+
- Data separation (so users can't see each other's budgets)
|
|
756
|
+
Everything else can come after those are solid."
|
|
757
|
+
|
|
758
|
+
[Switch to Production Mode for reliability]
|
|
759
|
+
|
|
760
|
+
```
|
|
761
|
+
|
|
762
|
+
### Any → Recovery: "Something Is Broken"
|
|
763
|
+
|
|
764
|
+
**Signals:**
|
|
765
|
+
|
|
766
|
+
- Users reporting errors
|
|
767
|
+
- Data inconsistencies appearing
|
|
768
|
+
- Features that worked no longer work
|
|
769
|
+
- Performance degradation
|
|
770
|
+
- Security vulnerability discovered
|
|
771
|
+
|
|
772
|
+
**Example Transition:**
|
|
773
|
+
|
|
774
|
+
```markdown
|
|
775
|
+
You: "I was in Speed Mode adding features, but users are saying
|
|
776
|
+
their data from yesterday is gone.
|
|
777
|
+
Here's what I changed: [paste]
|
|
778
|
+
Help me fix this NOW."
|
|
779
|
+
|
|
780
|
+
[Switch to Recovery Mode immediately]
|
|
781
|
+
|
|
782
|
+
```
|
|
783
|
+
|
|
784
|
+
### Recovery → Production: "Never Again"
|
|
785
|
+
|
|
786
|
+
**Signals:**
|
|
787
|
+
|
|
788
|
+
- The immediate crisis is resolved
|
|
789
|
+
- You understand what went wrong
|
|
790
|
+
- The fix needs to be permanent
|
|
791
|
+
- You want to prevent similar issues
|
|
792
|
+
|
|
793
|
+
**Example Transition:**
|
|
794
|
+
|
|
795
|
+
```markdown
|
|
796
|
+
You: "OK, we recovered the data and patched the bug.
|
|
797
|
+
But this exposed serious architectural problems.
|
|
798
|
+
Let's rebuild this section properly with tests and safeguards.
|
|
799
|
+
I never want another Saturday emergency like this."
|
|
800
|
+
|
|
801
|
+
[Switch to Production Mode for proper implementation]
|
|
802
|
+
|
|
803
|
+
```
|
|
804
|
+
|
|
805
|
+
### Common Anti-Patterns in Each Mode
|
|
806
|
+
|
|
807
|
+
Understanding what NOT to do is just as important as knowing what to do.
|
|
808
|
+
|
|
809
|
+
### Speed Mode Anti-Patterns
|
|
810
|
+
|
|
811
|
+
**🚫 The "Just One More Feature" Trap**
|
|
812
|
+
|
|
813
|
+
```markdown
|
|
814
|
+
Bad: "Add user accounts... now add social login... now add teams..."
|
|
815
|
+
Good: "Let's ship this version and use it for a week first"
|
|
816
|
+
|
|
817
|
+
```
|
|
818
|
+
|
|
819
|
+
**🚫 Premature Optimization**
|
|
820
|
+
|
|
821
|
+
```markdown
|
|
822
|
+
Bad: "Make sure this can handle 1 million users"
|
|
823
|
+
Good: "Make it work for me first"
|
|
824
|
+
|
|
825
|
+
```
|
|
826
|
+
|
|
827
|
+
**🚫 Architecture Astronauting**
|
|
828
|
+
|
|
829
|
+
```markdown
|
|
830
|
+
Bad: "Set up microservices with message queues"
|
|
831
|
+
Good: "Single file until it's painful"
|
|
832
|
+
|
|
833
|
+
```
|
|
834
|
+
|
|
835
|
+
### Discovery Mode Anti-Patterns
|
|
836
|
+
|
|
837
|
+
**🚫 Analysis Paralysis**
|
|
838
|
+
|
|
839
|
+
```markdown
|
|
840
|
+
Bad: "Let's explore our 15th approach to this problem"
|
|
841
|
+
Good: "These 3 approaches are enough, let's pick one"
|
|
842
|
+
|
|
843
|
+
```
|
|
844
|
+
|
|
845
|
+
**🚫 Building Instead of Discovering**
|
|
846
|
+
|
|
847
|
+
```markdown
|
|
848
|
+
Bad: "Build the full authentication system so we can test the idea"
|
|
849
|
+
Good: "Mock the auth with hardcoded users to test the concept"
|
|
850
|
+
|
|
851
|
+
```
|
|
852
|
+
|
|
853
|
+
**🚫 Scope Creep During Discovery**
|
|
854
|
+
|
|
855
|
+
```markdown
|
|
856
|
+
Bad: "While exploring, let's also add these 5 features"
|
|
857
|
+
Good: "Let's understand the core problem first"
|
|
858
|
+
|
|
859
|
+
```
|
|
860
|
+
|
|
861
|
+
### Production Mode Anti-Patterns
|
|
862
|
+
|
|
863
|
+
**🚫 Over-Engineering**
|
|
864
|
+
|
|
865
|
+
```markdown
|
|
866
|
+
Bad: "Let's add GraphQL, Redis, and Kubernetes from day one"
|
|
867
|
+
Good: "PostgreSQL and REST until we need more"
|
|
868
|
+
|
|
869
|
+
```
|
|
870
|
+
|
|
871
|
+
**🚫 Skipping Tests for "Simple" Features**
|
|
872
|
+
|
|
873
|
+
```markdown
|
|
874
|
+
Bad: "This is too simple to need tests"
|
|
875
|
+
Good: "If it touches user data, it needs tests"
|
|
876
|
+
|
|
877
|
+
```
|
|
878
|
+
|
|
879
|
+
**🚫 Security as an Afterthought**
|
|
880
|
+
|
|
881
|
+
```markdown
|
|
882
|
+
Bad: "We'll add authentication after launch"
|
|
883
|
+
Good: "Security is part of the foundation"
|
|
884
|
+
|
|
885
|
+
```
|
|
886
|
+
|
|
887
|
+
### Recovery Mode Anti-Patterns
|
|
888
|
+
|
|
889
|
+
**🚫 Fixing Without Understanding**
|
|
890
|
+
|
|
891
|
+
```markdown
|
|
892
|
+
Bad: "This change might work, let's try it in production"
|
|
893
|
+
Good: "Let me reproduce this locally first"
|
|
894
|
+
|
|
895
|
+
```
|
|
896
|
+
|
|
897
|
+
**🚫 Multiple Fixes at Once**
|
|
898
|
+
|
|
899
|
+
```markdown
|
|
900
|
+
Bad: "While fixing this, let's also refactor and optimize"
|
|
901
|
+
Good: "Fix the bug, then improve in a separate change"
|
|
902
|
+
|
|
903
|
+
```
|
|
904
|
+
|
|
905
|
+
**🚫 No Post-Mortem**
|
|
906
|
+
|
|
907
|
+
```markdown
|
|
908
|
+
Bad: "Fixed! Moving on..."
|
|
909
|
+
Good: "Fixed. Now let's prevent this pattern everywhere"
|
|
910
|
+
|
|
911
|
+
```
|
|
912
|
+
|
|
913
|
+
---
|
|
914
|
+
|
|
915
|
+
## Next Section Preview
|
|
916
|
+
|
|
917
|
+
The next section of this guide will cover:
|
|
918
|
+
|
|
919
|
+
- **Building New Features:** How to add to existing codebases
|
|
920
|
+
- **Refactoring:** When and how to restructure code
|
|
921
|
+
- **Testing Strategies:** What to test and when
|
|
922
|
+
- **Debugging Patterns:** Systematic approaches to finding bugs
|
|
923
|
+
|
|
924
|
+
Each section will follow the same mode-based approach, with specific examples and conversation templates you can use directly with Claude.
|
|
925
|
+
|
|
926
|
+
# The Vibe Coding Operating System: Part 2
|
|
927
|
+
|
|
928
|
+
## 2. Building New Features
|
|
929
|
+
|
|
930
|
+
Adding features to existing code is fundamentally different from starting fresh. You're working within constraints, dealing with existing patterns (good or bad), and trying not to break what already works. The mode you choose depends on how well you understand the existing code and how risky the new feature is.
|
|
931
|
+
|
|
932
|
+
### 🎯 Quick Decision Framework
|
|
933
|
+
|
|
934
|
+
Answer these questions:
|
|
935
|
+
|
|
936
|
+
1. **"Do I understand how the existing code works?"**
|
|
937
|
+
- No → Start with Discovery Mode to understand first
|
|
938
|
+
- Yes → Continue...
|
|
939
|
+
2. **"Could this feature break existing functionality?"**
|
|
940
|
+
- No (isolated feature) → Speed Mode
|
|
941
|
+
- Yes (touches core code) → Continue...
|
|
942
|
+
3. **"Are users actively using the affected parts?"**
|
|
943
|
+
- No → Speed Mode with careful testing
|
|
944
|
+
- Yes → Production Mode
|
|
945
|
+
|
|
946
|
+
### 🚀 Speed Mode: Adding Isolated Features
|
|
947
|
+
|
|
948
|
+
**When to use:**
|
|
949
|
+
|
|
950
|
+
- New feature doesn't touch existing core functionality
|
|
951
|
+
- Adding a new page/screen/component
|
|
952
|
+
- Enhancement that's additive, not modifying
|
|
953
|
+
- You understand the codebase structure
|
|
954
|
+
|
|
955
|
+
**Speed Mode Feature Addition:**
|
|
956
|
+
|
|
957
|
+
```markdown
|
|
958
|
+
You: "I want to add an export feature to my expense tracker.
|
|
959
|
+
Users should be able to download their data as CSV.
|
|
960
|
+
Here's my current code structure: [paste file tree]
|
|
961
|
+
The data is stored in localStorage as JSON."
|
|
962
|
+
|
|
963
|
+
Claude: "I'll add a simple export feature. Since this is read-only,
|
|
964
|
+
it won't affect your existing data flow. Let me create
|
|
965
|
+
an export button and function that converts your data to CSV."
|
|
966
|
+
[Adds export functionality]
|
|
967
|
+
|
|
968
|
+
You: "That works! But I just realized some expenses have commas in the notes.
|
|
969
|
+
Is that going to break the CSV?"
|
|
970
|
+
|
|
971
|
+
Claude: "Good catch! Let me add proper CSV escaping to handle
|
|
972
|
+
commas, quotes, and newlines in your data."
|
|
973
|
+
[Updates with proper CSV handling]
|
|
974
|
+
|
|
975
|
+
You: "Perfect. One more thing - can we add date range filtering?
|
|
976
|
+
Like export just this month or this year?"
|
|
977
|
+
|
|
978
|
+
Claude: [Adds date filtering to export]
|
|
979
|
+
|
|
980
|
+
```
|
|
981
|
+
|
|
982
|
+
**Real Speed Mode Example: Adding Search to a Note-Taking App**
|
|
983
|
+
|
|
984
|
+
```markdown
|
|
985
|
+
You: "My note-taking app is getting hard to navigate with 50+ notes.
|
|
986
|
+
I need to add search functionality.
|
|
987
|
+
Here's the main component: [paste code]
|
|
988
|
+
Notes are stored in an array with title and content."
|
|
989
|
+
|
|
990
|
+
Claude: "I'll add a search bar that filters notes in real-time.
|
|
991
|
+
Since we're just filtering the display, this won't affect
|
|
992
|
+
your data storage or existing functions."
|
|
993
|
+
[Implements search]
|
|
994
|
+
|
|
995
|
+
You: "This is searching titles perfectly! Can it also search the content?
|
|
996
|
+
Some of my important stuff is in the body, not the title."
|
|
997
|
+
|
|
998
|
+
Claude: "Sure! Let me update the search to check both title and content.
|
|
999
|
+
I'll also highlight the matching text so you can see why
|
|
1000
|
+
each result matched."
|
|
1001
|
+
[Enhances search functionality]
|
|
1002
|
+
|
|
1003
|
+
You: "Amazing! Oh, but now with 100+ notes, typing feels laggy.
|
|
1004
|
+
Each keystroke seems slow."
|
|
1005
|
+
|
|
1006
|
+
Claude: "That's because we're searching on every keystroke. Let me add
|
|
1007
|
+
debouncing - it'll wait until you stop typing for 300ms before
|
|
1008
|
+
searching. This will make it feel much more responsive."
|
|
1009
|
+
[Adds debouncing for performance]
|
|
1010
|
+
|
|
1011
|
+
```
|
|
1012
|
+
|
|
1013
|
+
**Speed Mode Feature Success Signals:**
|
|
1014
|
+
|
|
1015
|
+
- Feature works without touching existing code much
|
|
1016
|
+
- You can test it immediately in isolation
|
|
1017
|
+
- Integration is clean and obvious
|
|
1018
|
+
- No changes to data structures needed
|
|
1019
|
+
|
|
1020
|
+
### 🔍 Discovery Mode: Understanding Before Adding
|
|
1021
|
+
|
|
1022
|
+
**When to use:**
|
|
1023
|
+
|
|
1024
|
+
- You don't fully understand the existing code
|
|
1025
|
+
- The feature requires significant integration
|
|
1026
|
+
- Multiple ways to implement, unclear which is best
|
|
1027
|
+
- Side effects are unpredictable
|
|
1028
|
+
|
|
1029
|
+
**Discovery Mode Feature Flow:**
|
|
1030
|
+
|
|
1031
|
+
```markdown
|
|
1032
|
+
You: "I need to add collaborative editing to my document editor.
|
|
1033
|
+
Multiple people should be able to edit at once.
|
|
1034
|
+
Here's my current editor code: [paste code]
|
|
1035
|
+
I have no idea how to approach this."
|
|
1036
|
+
|
|
1037
|
+
Claude: "This is a complex feature with multiple architectural implications.
|
|
1038
|
+
Let me first understand your current setup:
|
|
1039
|
+
- You're using a simple textarea with local state
|
|
1040
|
+
- No backend currently exists
|
|
1041
|
+
- Documents are saved to localStorage
|
|
1042
|
+
|
|
1043
|
+
For collaboration, we have several approaches:
|
|
1044
|
+
1. Operational Transformation (like Google Docs)
|
|
1045
|
+
2. CRDTs (Conflict-free Replicated Data Types)
|
|
1046
|
+
3. Simple lock-based editing (one person at a time)
|
|
1047
|
+
4. Last-write-wins with manual conflict resolution
|
|
1048
|
+
|
|
1049
|
+
Given your current setup, what's your tolerance for complexity?"
|
|
1050
|
+
|
|
1051
|
+
You: "I don't understand most of those terms. What's the simplest option
|
|
1052
|
+
that still lets two people edit without losing each other's work?"
|
|
1053
|
+
|
|
1054
|
+
Claude: "Let me create a simple prototype showing approach #3 (lock-based).
|
|
1055
|
+
One person edits while others watch, then they can 'request control'.
|
|
1056
|
+
This avoids complex conflict resolution."
|
|
1057
|
+
[Creates interactive prototype]
|
|
1058
|
+
|
|
1059
|
+
You: "Hmm, that feels too restrictive. What would the next level up look like?"
|
|
1060
|
+
|
|
1061
|
+
Claude: "Here's approach #4 - both can edit, but if there's a conflict,
|
|
1062
|
+
the app shows both versions and asks which to keep."
|
|
1063
|
+
[Shows alternative approach]
|
|
1064
|
+
|
|
1065
|
+
You: "That's better! But how would this actually work with my current code?
|
|
1066
|
+
Would I need to rewrite everything?"
|
|
1067
|
+
|
|
1068
|
+
Claude: "Let me analyze your code and show you the minimum changes needed..."
|
|
1069
|
+
[Provides integration analysis]
|
|
1070
|
+
|
|
1071
|
+
```
|
|
1072
|
+
|
|
1073
|
+
**Discovery to Speed/Production Transition:**
|
|
1074
|
+
|
|
1075
|
+
Once you understand the approach:
|
|
1076
|
+
|
|
1077
|
+
```markdown
|
|
1078
|
+
You: "OK, I understand now. Let's go with the conflict resolution approach.
|
|
1079
|
+
But let's start simple - just two users, no fancy UI yet."
|
|
1080
|
+
|
|
1081
|
+
Claude: "Perfect. Now that we have clarity, let me implement the core
|
|
1082
|
+
synchronization logic first, then we'll add the UI."
|
|
1083
|
+
[Switches to focused implementation]
|
|
1084
|
+
|
|
1085
|
+
```
|
|
1086
|
+
|
|
1087
|
+
### 🛠️ Production Mode: Mission-Critical Features
|
|
1088
|
+
|
|
1089
|
+
**When to use:**
|
|
1090
|
+
|
|
1091
|
+
- Feature handles sensitive data (payments, user privacy)
|
|
1092
|
+
- Modifies core business logic
|
|
1093
|
+
- Affects system performance/stability
|
|
1094
|
+
- Has compliance/legal implications
|
|
1095
|
+
- Requires migration of existing data
|
|
1096
|
+
|
|
1097
|
+
**Production Mode Feature Flow:**
|
|
1098
|
+
|
|
1099
|
+
```markdown
|
|
1100
|
+
You: "I need to add payment processing to my coaching platform.
|
|
1101
|
+
Users will subscribe for $50/month for access to content.
|
|
1102
|
+
Currently using Next.js with PostgreSQL.
|
|
1103
|
+
100 active users who currently pay via Venmo.
|
|
1104
|
+
This needs to go live next month."
|
|
1105
|
+
|
|
1106
|
+
Claude: "This is definitely Production Mode. Payment processing requires:
|
|
1107
|
+
- PCI compliance (we'll use Stripe to handle this)
|
|
1108
|
+
- Robust error handling (failed payments, retries)
|
|
1109
|
+
- Webhook handling for payment events
|
|
1110
|
+
- Data consistency (subscription status)
|
|
1111
|
+
- Testing with Stripe's test mode
|
|
1112
|
+
|
|
1113
|
+
Let's start with architecture decisions:
|
|
1114
|
+
1. Stripe Checkout (simpler) vs custom form (more control)?
|
|
1115
|
+
2. How do we handle existing users' migration?
|
|
1116
|
+
3. What happens to content access if payment fails?"
|
|
1117
|
+
|
|
1118
|
+
You: "I don't know what PCI compliance is. Also, what's a webhook?
|
|
1119
|
+
This sounds complicated - what's the minimum safe approach?"
|
|
1120
|
+
|
|
1121
|
+
Claude: "Let me explain in simpler terms:
|
|
1122
|
+
- PCI compliance: Rules for handling credit cards safely.
|
|
1123
|
+
Stripe handles this if we use their checkout page.
|
|
1124
|
+
- Webhooks: Stripe tells your app when payments succeed/fail.
|
|
1125
|
+
|
|
1126
|
+
For minimum safe approach:
|
|
1127
|
+
1. Use Stripe Checkout (they handle all card details)
|
|
1128
|
+
2. Create a simple subscription table in your database
|
|
1129
|
+
3. Check subscription status before showing premium content
|
|
1130
|
+
|
|
1131
|
+
Let's start with the data model..."
|
|
1132
|
+
|
|
1133
|
+
You: "OK that makes sense. What about testing? I'm scared of charging
|
|
1134
|
+
real money by accident while building this."
|
|
1135
|
+
|
|
1136
|
+
Claude: "Great concern! Stripe has a test mode that uses fake card numbers.
|
|
1137
|
+
We'll build everything in test mode first. You can process
|
|
1138
|
+
thousands of fake payments to make sure it works.
|
|
1139
|
+
Let me show you the setup..."
|
|
1140
|
+
[Creates test-safe implementation]
|
|
1141
|
+
|
|
1142
|
+
```
|
|
1143
|
+
|
|
1144
|
+
**Production Mode Feature Checklist:**
|
|
1145
|
+
|
|
1146
|
+
```markdown
|
|
1147
|
+
Before Starting:
|
|
1148
|
+
□ Understand security implications
|
|
1149
|
+
□ Plan data migration (if needed)
|
|
1150
|
+
□ Identify rollback strategy
|
|
1151
|
+
□ Set up test environment
|
|
1152
|
+
□ Document compliance requirements
|
|
1153
|
+
|
|
1154
|
+
During Implementation:
|
|
1155
|
+
□ Write tests for critical paths
|
|
1156
|
+
□ Add comprehensive error handling
|
|
1157
|
+
□ Include audit logging
|
|
1158
|
+
□ Validate all inputs
|
|
1159
|
+
□ Handle edge cases explicitly
|
|
1160
|
+
|
|
1161
|
+
Before Deploying:
|
|
1162
|
+
□ Test with production-like data
|
|
1163
|
+
□ Security review the implementation
|
|
1164
|
+
□ Document the feature for team
|
|
1165
|
+
□ Create monitoring alerts
|
|
1166
|
+
□ Have rollback plan ready
|
|
1167
|
+
|
|
1168
|
+
```
|
|
1169
|
+
|
|
1170
|
+
### 🚨 Recovery Mode: When Features Break Things
|
|
1171
|
+
|
|
1172
|
+
**When a new feature causes problems:**
|
|
1173
|
+
|
|
1174
|
+
```markdown
|
|
1175
|
+
You: "I just deployed the search feature and now the app won't load at all!
|
|
1176
|
+
Console shows 'Cannot read property of undefined'.
|
|
1177
|
+
Users are complaining. Here's what I added: [paste code]"
|
|
1178
|
+
|
|
1179
|
+
Claude: "Let's fix this immediately. The error suggests the search is trying
|
|
1180
|
+
to access data that doesn't exist. First, let's add a safety check
|
|
1181
|
+
to stop the crashes, then we'll fix it properly.
|
|
1182
|
+
|
|
1183
|
+
Add this guard clause to prevent the error:
|
|
1184
|
+
[provides quick fix]
|
|
1185
|
+
|
|
1186
|
+
This will stop the crashing. Can you deploy this now?"
|
|
1187
|
+
|
|
1188
|
+
You: "Deployed! App loads again. But search shows no results ever.
|
|
1189
|
+
What went wrong?"
|
|
1190
|
+
|
|
1191
|
+
Claude: "Now that we've stopped the bleeding, let's debug properly.
|
|
1192
|
+
The issue is likely that the data structure changed or
|
|
1193
|
+
some users have different data format. Let me help you
|
|
1194
|
+
add logging to understand what's happening..."
|
|
1195
|
+
[Provides debugging approach]
|
|
1196
|
+
|
|
1197
|
+
```
|
|
1198
|
+
|
|
1199
|
+
## 3. Refactoring: Improving Without Breaking
|
|
1200
|
+
|
|
1201
|
+
Refactoring is about making code better without changing what it does. It's particularly challenging in vibe coding because you might not fully understand why the code was written a certain way. The mode you choose depends on your understanding and the risk involved.
|
|
1202
|
+
|
|
1203
|
+
### 🎯 When to Refactor
|
|
1204
|
+
|
|
1205
|
+
**Clear signals you need refactoring:**
|
|
1206
|
+
|
|
1207
|
+
- You're afraid to change something
|
|
1208
|
+
- You have to explain the same thing to Claude repeatedly
|
|
1209
|
+
- Simple changes require touching many files
|
|
1210
|
+
- The same bug keeps happening in different places
|
|
1211
|
+
- You can't remember what a piece of code does
|
|
1212
|
+
- Claude's responses include "This is getting complex..."
|
|
1213
|
+
|
|
1214
|
+
### 🚀 Speed Mode: Quick Cleanup
|
|
1215
|
+
|
|
1216
|
+
**When to use:**
|
|
1217
|
+
|
|
1218
|
+
- Renaming variables for clarity
|
|
1219
|
+
- Extracting obvious components
|
|
1220
|
+
- Removing dead code
|
|
1221
|
+
- Formatting consistency
|
|
1222
|
+
- Simple file reorganization
|
|
1223
|
+
|
|
1224
|
+
**Speed Mode Refactoring:**
|
|
1225
|
+
|
|
1226
|
+
```markdown
|
|
1227
|
+
You: "This component is 500 lines and I get lost every time I open it.
|
|
1228
|
+
Here's the code: [paste code]
|
|
1229
|
+
Can you break this into smaller, logical pieces?"
|
|
1230
|
+
|
|
1231
|
+
Claude: "I can see this component is doing several distinct things:
|
|
1232
|
+
- User form handling
|
|
1233
|
+
- Data validation
|
|
1234
|
+
- API calls
|
|
1235
|
+
- Error display
|
|
1236
|
+
- Success notifications
|
|
1237
|
+
|
|
1238
|
+
Let me break it into smaller components..."
|
|
1239
|
+
[Refactors into multiple components]
|
|
1240
|
+
|
|
1241
|
+
You: "Much cleaner! But now I have 5 files instead of 1.
|
|
1242
|
+
How do I organize these?"
|
|
1243
|
+
|
|
1244
|
+
Claude: "Let's create a folder structure that groups related components:
|
|
1245
|
+
- UserForm/
|
|
1246
|
+
- index.js (main form)
|
|
1247
|
+
- Validation.js
|
|
1248
|
+
- ApiHandlers.js
|
|
1249
|
+
- Notifications.js
|
|
1250
|
+
This keeps related code together."
|
|
1251
|
+
[Shows organization]
|
|
1252
|
+
|
|
1253
|
+
```
|
|
1254
|
+
|
|
1255
|
+
### 🔍 Discovery Mode: Understanding Messy Code
|
|
1256
|
+
|
|
1257
|
+
**When to use:**
|
|
1258
|
+
|
|
1259
|
+
- Inherited codebase you don't understand
|
|
1260
|
+
- Complex logic that's hard to follow
|
|
1261
|
+
- Refactoring that might change behavior
|
|
1262
|
+
- Performance optimization needed
|
|
1263
|
+
|
|
1264
|
+
**Discovery Mode Refactoring:**
|
|
1265
|
+
|
|
1266
|
+
```markdown
|
|
1267
|
+
You: "I have this function that works but I don't understand it.
|
|
1268
|
+
Every time I try to modify it, something breaks.
|
|
1269
|
+
Here it is: [paste complex function]
|
|
1270
|
+
What is this even doing?"
|
|
1271
|
+
|
|
1272
|
+
Claude: "Let me break down what this function does step by step:
|
|
1273
|
+
1. Takes user input and validates it
|
|
1274
|
+
2. Transforms data into a specific format
|
|
1275
|
+
3. Makes THREE different API calls (this is unusual)
|
|
1276
|
+
4. Combines the results in a complex way
|
|
1277
|
+
5. Updates multiple state variables
|
|
1278
|
+
|
|
1279
|
+
This is doing too much in one function. Before refactoring,
|
|
1280
|
+
let me add comments explaining each section..."
|
|
1281
|
+
[Adds explanatory comments]
|
|
1282
|
+
|
|
1283
|
+
You: "OK I understand it better now. But why three API calls?
|
|
1284
|
+
That seems wrong."
|
|
1285
|
+
|
|
1286
|
+
Claude: "Looking closer, it seems like this might be working around
|
|
1287
|
+
a backend limitation. The three calls are:
|
|
1288
|
+
1. Get user permissions
|
|
1289
|
+
2. Get data based on permissions
|
|
1290
|
+
3. Get related metadata
|
|
1291
|
+
|
|
1292
|
+
These could potentially be one call. Do you control the backend?"
|
|
1293
|
+
|
|
1294
|
+
You: "No, it's a third-party API. So we're stuck with this?"
|
|
1295
|
+
|
|
1296
|
+
Claude: "Not necessarily. We can make this cleaner by:
|
|
1297
|
+
1. Extracting each API call to its own function
|
|
1298
|
+
2. Using Promise.all() to parallelize them
|
|
1299
|
+
3. Creating a clear data transformation pipeline
|
|
1300
|
+
Let me show you a cleaner version that does the same thing..."
|
|
1301
|
+
[Shows refactored version]
|
|
1302
|
+
|
|
1303
|
+
You: "That's much clearer! But I'm scared to replace the old one.
|
|
1304
|
+
What if it breaks something subtle?"
|
|
1305
|
+
|
|
1306
|
+
Claude: "Good instinct! Let's add tests first to capture the current
|
|
1307
|
+
behavior, then we can refactor safely..."
|
|
1308
|
+
[Creates tests for existing behavior]
|
|
1309
|
+
|
|
1310
|
+
```
|
|
1311
|
+
|
|
1312
|
+
### 🛠️ Production Mode: Safe Systematic Refactoring
|
|
1313
|
+
|
|
1314
|
+
**When to use:**
|
|
1315
|
+
|
|
1316
|
+
- Core business logic refactoring
|
|
1317
|
+
- Database schema changes
|
|
1318
|
+
- API contract modifications
|
|
1319
|
+
- Performance-critical code
|
|
1320
|
+
- Refactoring that affects multiple systems
|
|
1321
|
+
|
|
1322
|
+
**Production Mode Refactoring Process:**
|
|
1323
|
+
|
|
1324
|
+
```markdown
|
|
1325
|
+
You: "Our user authentication is a mess. It's spread across 10 files,
|
|
1326
|
+
has duplicate logic, and is hard to debug.
|
|
1327
|
+
But it's working in production with 1000 users.
|
|
1328
|
+
How do I refactor this safely?"
|
|
1329
|
+
|
|
1330
|
+
Claude: "This requires careful Production Mode refactoring. Let's approach
|
|
1331
|
+
this systematically:
|
|
1332
|
+
|
|
1333
|
+
Phase 1: Document current behavior
|
|
1334
|
+
- Map all authentication flows
|
|
1335
|
+
- Identify all entry points
|
|
1336
|
+
- Document edge cases
|
|
1337
|
+
|
|
1338
|
+
Phase 2: Create comprehensive tests
|
|
1339
|
+
- Test current behavior exactly
|
|
1340
|
+
- Include edge cases and errors
|
|
1341
|
+
|
|
1342
|
+
Phase 3: Gradual refactoring
|
|
1343
|
+
- Extract one piece at a time
|
|
1344
|
+
- Keep old and new running in parallel
|
|
1345
|
+
- Switch over gradually
|
|
1346
|
+
|
|
1347
|
+
Let's start with Phase 1. Can you show me:
|
|
1348
|
+
1. How users log in
|
|
1349
|
+
2. How sessions are managed
|
|
1350
|
+
3. How permissions are checked"
|
|
1351
|
+
|
|
1352
|
+
You: "I think login happens in 3 different ways:
|
|
1353
|
+
- Email/password
|
|
1354
|
+
- Google OAuth
|
|
1355
|
+
- Magic link email
|
|
1356
|
+
But I'm not sure where all the code is."
|
|
1357
|
+
|
|
1358
|
+
Claude: "Let's trace through each flow. Start your app and:
|
|
1359
|
+
1. Try to log in with email/password
|
|
1360
|
+
2. Look at Network tab in browser DevTools
|
|
1361
|
+
3. Tell me what API calls you see
|
|
1362
|
+
This will help us map the actual flow."
|
|
1363
|
+
|
|
1364
|
+
You: [Provides network trace information]
|
|
1365
|
+
|
|
1366
|
+
Claude: "Perfect! Now I can see the flow. Before we refactor,
|
|
1367
|
+
let's create a test suite that captures this exact behavior.
|
|
1368
|
+
This way, we'll know immediately if we break anything..."
|
|
1369
|
+
[Creates comprehensive test suite]
|
|
1370
|
+
|
|
1371
|
+
You: "All tests pass! Now what?"
|
|
1372
|
+
|
|
1373
|
+
Claude: "Now we can refactor safely. Let's create a new AuthService
|
|
1374
|
+
that centralizes all authentication logic. We'll:
|
|
1375
|
+
1. Build it alongside the old code
|
|
1376
|
+
2. Migrate one flow at a time
|
|
1377
|
+
3. Run both in parallel briefly
|
|
1378
|
+
4. Remove old code once stable
|
|
1379
|
+
|
|
1380
|
+
Here's the new structure..."
|
|
1381
|
+
[Implements careful refactoring]
|
|
1382
|
+
|
|
1383
|
+
```
|
|
1384
|
+
|
|
1385
|
+
**Production Refactoring Safety Checklist:**
|
|
1386
|
+
|
|
1387
|
+
```markdown
|
|
1388
|
+
Before Refactoring:
|
|
1389
|
+
□ Current behavior documented
|
|
1390
|
+
□ Tests capture existing functionality
|
|
1391
|
+
□ Performance baseline measured
|
|
1392
|
+
□ Rollback plan prepared
|
|
1393
|
+
□ Team/users notified if needed
|
|
1394
|
+
|
|
1395
|
+
During Refactoring:
|
|
1396
|
+
□ One logical change at a time
|
|
1397
|
+
□ Tests pass after each change
|
|
1398
|
+
□ Feature flags for gradual rollout
|
|
1399
|
+
□ Old code kept temporarily
|
|
1400
|
+
□ Performance monitored
|
|
1401
|
+
|
|
1402
|
+
After Refactoring:
|
|
1403
|
+
□ All tests still passing
|
|
1404
|
+
□ Performance same or better
|
|
1405
|
+
□ Old code removed
|
|
1406
|
+
□ Documentation updated
|
|
1407
|
+
□ Team knowledge transferred
|
|
1408
|
+
|
|
1409
|
+
```
|
|
1410
|
+
|
|
1411
|
+
### 🚨 Recovery Mode: When Refactoring Goes Wrong
|
|
1412
|
+
|
|
1413
|
+
```markdown
|
|
1414
|
+
You: "I refactored the data processing pipeline and deployed it.
|
|
1415
|
+
Now users are seeing wrong calculations!
|
|
1416
|
+
The old code was messy but it worked.
|
|
1417
|
+
Here's my refactored version: [paste code]"
|
|
1418
|
+
|
|
1419
|
+
Claude: "First, let's revert to the working version immediately.
|
|
1420
|
+
Do you have the old code available?"
|
|
1421
|
+
|
|
1422
|
+
You: "Yes, it's in git history but I don't know git well."
|
|
1423
|
+
|
|
1424
|
+
Claude: "Run these commands to revert safely:
|
|
1425
|
+
1. `git log --oneline -10` (shows recent commits)
|
|
1426
|
+
2. Find the commit before your refactoring
|
|
1427
|
+
3. `git checkout [commit-hash] -- [filename]`
|
|
1428
|
+
4. Deploy this immediately
|
|
1429
|
+
|
|
1430
|
+
This will restore just that file to the old version."
|
|
1431
|
+
|
|
1432
|
+
You: "Reverted and deployed! Calculations are correct again.
|
|
1433
|
+
But I spent hours on that refactoring. Was it all waste?"
|
|
1434
|
+
|
|
1435
|
+
Claude: "Not at all! Your refactoring probably exposed bugs in the original.
|
|
1436
|
+
The messy code might have been compensating for data issues.
|
|
1437
|
+
Let's debug this properly:
|
|
1438
|
+
|
|
1439
|
+
1. Keep both versions locally
|
|
1440
|
+
2. Run the same data through both
|
|
1441
|
+
3. Find where results diverge
|
|
1442
|
+
4. Understand why the difference exists
|
|
1443
|
+
5. Then decide which is actually correct"
|
|
1444
|
+
[Provides debugging approach]
|
|
1445
|
+
|
|
1446
|
+
```
|
|
1447
|
+
|
|
1448
|
+
## 4. Testing Strategies
|
|
1449
|
+
|
|
1450
|
+
Testing in vibe coding is different because you're often building and testing simultaneously through conversation. The key is knowing what needs formal tests versus what can be validated through use.
|
|
1451
|
+
|
|
1452
|
+
### 🎯 The Testing Decision Matrix
|
|
1453
|
+
|
|
1454
|
+
Ask yourself:
|
|
1455
|
+
|
|
1456
|
+
1. **"Am I afraid to change this code?"** → Needs tests
|
|
1457
|
+
2. **"Would a bug here affect users?"** → Needs tests
|
|
1458
|
+
3. **"Is the logic complex?"** → Needs tests
|
|
1459
|
+
4. **"Will I remember how this works in 3 months?"** → Needs tests
|
|
1460
|
+
|
|
1461
|
+
If all answers are "no" → Speed Mode (minimal/no tests)
|
|
1462
|
+
If 1-2 "yes" → Discovery Mode (test critical paths)
|
|
1463
|
+
If 3-4 "yes" → Production Mode (comprehensive tests)
|
|
1464
|
+
|
|
1465
|
+
### 🚀 Speed Mode: Pragmatic Testing
|
|
1466
|
+
|
|
1467
|
+
**When to use:**
|
|
1468
|
+
|
|
1469
|
+
- Personal projects
|
|
1470
|
+
- Prototypes
|
|
1471
|
+
- UI-only components
|
|
1472
|
+
- Simple CRUD operations
|
|
1473
|
+
|
|
1474
|
+
**Speed Mode Testing Approach:**
|
|
1475
|
+
|
|
1476
|
+
```markdown
|
|
1477
|
+
You: "I built this expense tracker for myself. Do I need tests?
|
|
1478
|
+
It's working fine and I'm the only user."
|
|
1479
|
+
|
|
1480
|
+
Claude: "For a personal project, you don't need extensive tests.
|
|
1481
|
+
However, consider adding a few tests for:
|
|
1482
|
+
- The calculation logic (so you trust the totals)
|
|
1483
|
+
- Data formatting for exports
|
|
1484
|
+
- Any complex date handling
|
|
1485
|
+
|
|
1486
|
+
Skip tests for:
|
|
1487
|
+
- UI components
|
|
1488
|
+
- Simple form inputs
|
|
1489
|
+
- Display formatting
|
|
1490
|
+
|
|
1491
|
+
Would you like me to add tests just for the calculation logic?"
|
|
1492
|
+
|
|
1493
|
+
You: "Sure, just so I know my totals are always right."
|
|
1494
|
+
|
|
1495
|
+
Claude: [Creates minimal test suite for calculations]
|
|
1496
|
+
|
|
1497
|
+
You: "These tests are already catching an edge case!
|
|
1498
|
+
My monthly totals were wrong for months with 31 days."
|
|
1499
|
+
|
|
1500
|
+
Claude: "Perfect example of why even minimal tests help!
|
|
1501
|
+
The bug was subtle enough you didn't notice in daily use.
|
|
1502
|
+
Let me fix the calculation and update the test..."
|
|
1503
|
+
|
|
1504
|
+
```
|
|
1505
|
+
|
|
1506
|
+
### 🔍 Discovery Mode: Learning Through Testing
|
|
1507
|
+
|
|
1508
|
+
**When to use:**
|
|
1509
|
+
|
|
1510
|
+
- Understanding complex code
|
|
1511
|
+
- Documenting behavior
|
|
1512
|
+
- Exploring edge cases
|
|
1513
|
+
- Refactoring preparation
|
|
1514
|
+
|
|
1515
|
+
**Discovery Mode Testing:**
|
|
1516
|
+
|
|
1517
|
+
```markdown
|
|
1518
|
+
You: "I inherited this payment calculation function.
|
|
1519
|
+
It has all sorts of special cases and I don't understand when each applies.
|
|
1520
|
+
Here's the code: [paste complex function]
|
|
1521
|
+
How do I figure out what this actually does?"
|
|
1522
|
+
|
|
1523
|
+
Claude: "Let's use tests to discover and document the behavior.
|
|
1524
|
+
Instead of trying to understand the code, we'll:
|
|
1525
|
+
1. Write tests for different inputs
|
|
1526
|
+
2. See what outputs we get
|
|
1527
|
+
3. Document the patterns we find
|
|
1528
|
+
|
|
1529
|
+
This is called 'characterization testing' - we're discovering
|
|
1530
|
+
what the code does, not what it should do."
|
|
1531
|
+
[Creates exploratory tests]
|
|
1532
|
+
|
|
1533
|
+
You: "Interesting! So it applies a 10% discount on Tuesdays,
|
|
1534
|
+
5% for orders over $100, and they stack?
|
|
1535
|
+
I had no idea about the Tuesday thing."
|
|
1536
|
+
|
|
1537
|
+
Claude: "Exactly! And now we've documented this behavior in tests.
|
|
1538
|
+
This seems like business logic that should be more explicit.
|
|
1539
|
+
Want me to refactor this to make the rules clearer?"
|
|
1540
|
+
|
|
1541
|
+
You: "Yes! But keep the tests to make sure behavior doesn't change."
|
|
1542
|
+
|
|
1543
|
+
Claude: [Refactors with test safety net]
|
|
1544
|
+
|
|
1545
|
+
```
|
|
1546
|
+
|
|
1547
|
+
### 🛠️ Production Mode: Comprehensive Testing
|
|
1548
|
+
|
|
1549
|
+
**When to use:**
|
|
1550
|
+
|
|
1551
|
+
- Financial calculations
|
|
1552
|
+
- User authentication/authorization
|
|
1553
|
+
- Data transformations
|
|
1554
|
+
- API integrations
|
|
1555
|
+
- Business-critical logic
|
|
1556
|
+
|
|
1557
|
+
**Production Mode Testing Strategy:**
|
|
1558
|
+
|
|
1559
|
+
```markdown
|
|
1560
|
+
You: "I'm building an invoicing system for freelancers.
|
|
1561
|
+
It calculates taxes, handles multiple currencies, and sends payment reminders.
|
|
1562
|
+
This needs to be bulletproof. What's my testing strategy?"
|
|
1563
|
+
|
|
1564
|
+
Claude: "For financial software, we need multiple layers of tests:
|
|
1565
|
+
|
|
1566
|
+
1. Unit Tests:
|
|
1567
|
+
- Tax calculations for each jurisdiction
|
|
1568
|
+
- Currency conversion accuracy
|
|
1569
|
+
- Date/reminder logic
|
|
1570
|
+
- Rounding behavior (this is critical!)
|
|
1571
|
+
|
|
1572
|
+
2. Integration Tests:
|
|
1573
|
+
- Full invoice generation flow
|
|
1574
|
+
- Payment reminder scheduling
|
|
1575
|
+
- Email sending with correct data
|
|
1576
|
+
|
|
1577
|
+
3. Edge Case Tests:
|
|
1578
|
+
- Leap years, month boundaries
|
|
1579
|
+
- Decimal precision limits
|
|
1580
|
+
- Negative amounts (refunds)
|
|
1581
|
+
- Currency pairs with extreme rates
|
|
1582
|
+
|
|
1583
|
+
4. Regression Tests:
|
|
1584
|
+
- Known bugs that were fixed
|
|
1585
|
+
- Customer-reported issues
|
|
1586
|
+
|
|
1587
|
+
Let's start with the most critical: tax calculations..."
|
|
1588
|
+
|
|
1589
|
+
You: "This is overwhelming. What if I miss a test case and someone's
|
|
1590
|
+
taxes are calculated wrong?"
|
|
1591
|
+
|
|
1592
|
+
Claude: "Good concern! Let's approach this systematically:
|
|
1593
|
+
1. Start with the most common cases (80% of usage)
|
|
1594
|
+
2. Add test cases as you encounter them
|
|
1595
|
+
3. Use property-based testing for calculations
|
|
1596
|
+
4. Have a disclaimer about tax advice
|
|
1597
|
+
5. Log all calculations for audit
|
|
1598
|
+
|
|
1599
|
+
Here's a starter test suite that covers the critical paths..."
|
|
1600
|
+
[Creates comprehensive test structure]
|
|
1601
|
+
|
|
1602
|
+
You: "What's property-based testing? I've never heard of that."
|
|
1603
|
+
|
|
1604
|
+
Claude: "Instead of testing specific values, we test properties that
|
|
1605
|
+
should always be true. For example:
|
|
1606
|
+
- Tax should never be negative
|
|
1607
|
+
- Tax should never exceed the invoice amount
|
|
1608
|
+
- Converting USD→EUR→USD should roughly return original amount
|
|
1609
|
+
|
|
1610
|
+
This catches edge cases we didn't think of. Let me show you..."
|
|
1611
|
+
[Demonstrates property-based tests]
|
|
1612
|
+
|
|
1613
|
+
```
|
|
1614
|
+
|
|
1615
|
+
**Production Testing Checklist:**
|
|
1616
|
+
|
|
1617
|
+
```markdown
|
|
1618
|
+
Critical Path Tests:
|
|
1619
|
+
□ Happy path for each major feature
|
|
1620
|
+
□ Authentication and authorization
|
|
1621
|
+
□ Payment/financial calculations
|
|
1622
|
+
□ Data integrity operations
|
|
1623
|
+
|
|
1624
|
+
Edge Cases:
|
|
1625
|
+
□ Boundary values (0, negative, maximum)
|
|
1626
|
+
□ Empty/null/undefined inputs
|
|
1627
|
+
□ Concurrent operations
|
|
1628
|
+
□ Network failures/retries
|
|
1629
|
+
|
|
1630
|
+
Regression Prevention:
|
|
1631
|
+
□ Each fixed bug gets a test
|
|
1632
|
+
□ Customer-reported issues tested
|
|
1633
|
+
□ Performance benchmarks
|
|
1634
|
+
□ Security vulnerability tests
|
|
1635
|
+
|
|
1636
|
+
```
|
|
1637
|
+
|
|
1638
|
+
### 🚨 Recovery Mode: Emergency Test Creation
|
|
1639
|
+
|
|
1640
|
+
```markdown
|
|
1641
|
+
You: "A user found a bug in the discount calculation.
|
|
1642
|
+
Some specific combination of coupons causes negative prices!
|
|
1643
|
+
I need to fix this ASAP but I'm scared of breaking other cases."
|
|
1644
|
+
|
|
1645
|
+
Claude: "Let's create tests immediately to:
|
|
1646
|
+
1. Reproduce the bug
|
|
1647
|
+
2. Prevent regression
|
|
1648
|
+
3. Find similar issues
|
|
1649
|
+
|
|
1650
|
+
First, can you give me the exact inputs that cause negative prices?"
|
|
1651
|
+
|
|
1652
|
+
You: "It's when they use a 50% off coupon and a $100 off coupon
|
|
1653
|
+
on a $150 item. The price becomes -$25!"
|
|
1654
|
+
|
|
1655
|
+
Claude: "I'll create tests for this case and related scenarios:
|
|
1656
|
+
[Creates focused test suite]
|
|
1657
|
+
|
|
1658
|
+
Now we can see the bug clearly. The issue is coupon ordering.
|
|
1659
|
+
Here's a fix that ensures price never goes below zero..."
|
|
1660
|
+
[Provides fix with tests]
|
|
1661
|
+
|
|
1662
|
+
You: "Fixed! But how did I miss this? Should I test every possible
|
|
1663
|
+
combination of coupons?"
|
|
1664
|
+
|
|
1665
|
+
Claude: "No, that's combinatorial explosion. Instead, test properties:
|
|
1666
|
+
- Final price >= 0
|
|
1667
|
+
- Total discount <= original price
|
|
1668
|
+
- Order of coupons shouldn't matter (or should be explicit)
|
|
1669
|
+
|
|
1670
|
+
These catch entire categories of bugs, not just specific cases."
|
|
1671
|
+
|
|
1672
|
+
```
|
|
1673
|
+
|
|
1674
|
+
## 5. Debugging Patterns
|
|
1675
|
+
|
|
1676
|
+
Debugging through conversation is an art. You're not just fixing bugs; you're learning to communicate symptoms effectively and interpret Claude's diagnostic suggestions.
|
|
1677
|
+
|
|
1678
|
+
### 🎯 The Debugging Communication Framework
|
|
1679
|
+
|
|
1680
|
+
The quality of help you get depends on the information you provide:
|
|
1681
|
+
|
|
1682
|
+
**Bad:** "It's broken"
|
|
1683
|
+
**Good:** "The save button doesn't work"
|
|
1684
|
+
**Better:** "Clicking save shows 'undefined' error"
|
|
1685
|
+
**Best:** "Clicking save shows 'Cannot read property id of undefined' in SaveHandler.js line 23. Here's the relevant code: [paste]"
|
|
1686
|
+
|
|
1687
|
+
### 🚀 Speed Mode: Quick Fixes
|
|
1688
|
+
|
|
1689
|
+
**When to use:**
|
|
1690
|
+
|
|
1691
|
+
- Clear error messages
|
|
1692
|
+
- Obvious problems
|
|
1693
|
+
- Local development only
|
|
1694
|
+
- Non-critical bugs
|
|
1695
|
+
|
|
1696
|
+
**Speed Mode Debugging:**
|
|
1697
|
+
|
|
1698
|
+
```markdown
|
|
1699
|
+
You: "I'm getting 'map is not a function' error.
|
|
1700
|
+
Here's the code: [paste code]
|
|
1701
|
+
The error points to this line where I map over users."
|
|
1702
|
+
|
|
1703
|
+
Claude: "The error means 'users' isn't an array when you try to map.
|
|
1704
|
+
Common causes:
|
|
1705
|
+
1. Users might be undefined initially
|
|
1706
|
+
2. API might return an object instead of array
|
|
1707
|
+
3. State might be reset to non-array value
|
|
1708
|
+
|
|
1709
|
+
Quick fix - add a safety check:
|
|
1710
|
+
`{users && Array.isArray(users) && users.map(...)}`
|
|
1711
|
+
|
|
1712
|
+
But let's also find why it's not an array.
|
|
1713
|
+
Can you console.log(users) right before the map?"
|
|
1714
|
+
|
|
1715
|
+
You: "Oh! It logs 'undefined' on first render, then the array appears.
|
|
1716
|
+
So it's a timing issue?"
|
|
1717
|
+
|
|
1718
|
+
Claude: "Exactly! The component renders before data loads.
|
|
1719
|
+
The safety check handles this, or you could:
|
|
1720
|
+
- Initialize users as empty array: `useState([])`
|
|
1721
|
+
- Show loading state while fetching
|
|
1722
|
+
- Use optional chaining: `users?.map()`"
|
|
1723
|
+
|
|
1724
|
+
```
|
|
1725
|
+
|
|
1726
|
+
### 🔍 Discovery Mode: Detective Work
|
|
1727
|
+
|
|
1728
|
+
**When to use:**
|
|
1729
|
+
|
|
1730
|
+
- Intermittent bugs
|
|
1731
|
+
- Complex state issues
|
|
1732
|
+
- Performance problems
|
|
1733
|
+
- "It works locally but not in production"
|
|
1734
|
+
|
|
1735
|
+
**Discovery Mode Debugging:**
|
|
1736
|
+
|
|
1737
|
+
```markdown
|
|
1738
|
+
You: "Users report the app 'freezes' sometimes when searching.
|
|
1739
|
+
I can't reproduce it. It works fine for me.
|
|
1740
|
+
Search code: [paste code]
|
|
1741
|
+
What could cause intermittent freezing?"
|
|
1742
|
+
|
|
1743
|
+
Claude: "Intermittent freezing suggests performance issues that appear
|
|
1744
|
+
with certain data conditions. Let's investigate:
|
|
1745
|
+
|
|
1746
|
+
1. How many items are users searching through?
|
|
1747
|
+
2. Are some search terms slower than others?
|
|
1748
|
+
3. Does it happen on mobile/slower devices?
|
|
1749
|
+
|
|
1750
|
+
Let's add diagnostic logging to understand what's happening..."
|
|
1751
|
+
|
|
1752
|
+
You: "I asked a user - they have 10,000+ items! I only tested with 100.
|
|
1753
|
+
Could that be it?"
|
|
1754
|
+
|
|
1755
|
+
Claude: "Absolutely! Your search is running on every keystroke through
|
|
1756
|
+
10,000 items. That's potentially millions of operations per second.
|
|
1757
|
+
|
|
1758
|
+
Let me show you three solutions:
|
|
1759
|
+
1. Debouncing - wait for typing to stop
|
|
1760
|
+
2. Virtual scrolling - only render visible items
|
|
1761
|
+
3. Web Worker - search in background thread
|
|
1762
|
+
|
|
1763
|
+
Let's start with debouncing, it's simplest..."
|
|
1764
|
+
[Implements progressive solutions]
|
|
1765
|
+
|
|
1766
|
+
You: "Debouncing helped but still sluggish with 10k items."
|
|
1767
|
+
|
|
1768
|
+
Claude: "Time for solution #2. Instead of searching in the UI thread,
|
|
1769
|
+
let's move the search logic to a Web Worker.
|
|
1770
|
+
This keeps the UI responsive even during heavy computation..."
|
|
1771
|
+
[Implements more advanced solution]
|
|
1772
|
+
|
|
1773
|
+
```
|
|
1774
|
+
|
|
1775
|
+
### 🛠️ Production Mode: Systematic Debugging
|
|
1776
|
+
|
|
1777
|
+
**When to use:**
|
|
1778
|
+
|
|
1779
|
+
- Production issues affecting users
|
|
1780
|
+
- Data corruption or loss
|
|
1781
|
+
- Security-related bugs
|
|
1782
|
+
- Complex multi-system issues
|
|
1783
|
+
|
|
1784
|
+
**Production Mode Debugging Process:**
|
|
1785
|
+
|
|
1786
|
+
```markdown
|
|
1787
|
+
You: "CRITICAL: Some users' data is getting mixed up.
|
|
1788
|
+
User A sees User B's information sometimes.
|
|
1789
|
+
This is a privacy disaster. Started 3 hours ago.
|
|
1790
|
+
We use React with a Node.js backend."
|
|
1791
|
+
|
|
1792
|
+
Claude: "This is a critical security issue. Let's handle this systematically:
|
|
1793
|
+
|
|
1794
|
+
IMMEDIATE ACTIONS:
|
|
1795
|
+
1. Can you disable the affected feature immediately?
|
|
1796
|
+
2. Do you have logs showing when this started?
|
|
1797
|
+
3. What deployed/changed 3 hours ago?
|
|
1798
|
+
|
|
1799
|
+
LIKELY CAUSES:
|
|
1800
|
+
- Caching issues (most common for this symptom)
|
|
1801
|
+
- Session management problems
|
|
1802
|
+
- Global state pollution
|
|
1803
|
+
- Database query issues
|
|
1804
|
+
|
|
1805
|
+
First, let's stop the bleeding..."
|
|
1806
|
+
|
|
1807
|
+
You: "I can't disable it - it's the main dashboard.
|
|
1808
|
+
Logs show it started after we deployed a 'performance improvement'.
|
|
1809
|
+
We added caching to the user API endpoint."
|
|
1810
|
+
|
|
1811
|
+
Claude: "That's almost certainly the cause. Caching user-specific data
|
|
1812
|
+
is extremely dangerous if not done correctly.
|
|
1813
|
+
|
|
1814
|
+
IMMEDIATE FIX:
|
|
1815
|
+
1. Disable the cache immediately
|
|
1816
|
+
2. Clear all existing cache entries
|
|
1817
|
+
3. Deploy immediately
|
|
1818
|
+
|
|
1819
|
+
Here's how to disable the cache safely:
|
|
1820
|
+
[Provides emergency fix]"
|
|
1821
|
+
|
|
1822
|
+
You: "Deployed! Users reporting it's fixed.
|
|
1823
|
+
But now the site is slow again. How do we cache safely?"
|
|
1824
|
+
|
|
1825
|
+
Claude: "Good, crisis averted. For safe caching of user data:
|
|
1826
|
+
1. Always include user ID in cache key
|
|
1827
|
+
2. Never cache personal information
|
|
1828
|
+
3. Use cache headers, not application cache
|
|
1829
|
+
4. Implement cache isolation per user
|
|
1830
|
+
|
|
1831
|
+
Let me show you a safe caching pattern..."
|
|
1832
|
+
[Implements secure solution]
|
|
1833
|
+
|
|
1834
|
+
```
|
|
1835
|
+
|
|
1836
|
+
### 🚨 Recovery Mode: Debugging in Crisis
|
|
1837
|
+
|
|
1838
|
+
```markdown
|
|
1839
|
+
You: "The production database queries are timing out!
|
|
1840
|
+
Site is down. 500 errors everywhere.
|
|
1841
|
+
Started 10 minutes ago. No recent deploys.
|
|
1842
|
+
HELP!"
|
|
1843
|
+
|
|
1844
|
+
Claude: "Database timeout crisis - let's triage immediately:
|
|
1845
|
+
|
|
1846
|
+
DIAGNOSTIC STEPS (run these now):
|
|
1847
|
+
1. Check database connection pool
|
|
1848
|
+
2. Look for long-running queries
|
|
1849
|
+
3. Check disk space on database server
|
|
1850
|
+
4. Look for table locks
|
|
1851
|
+
|
|
1852
|
+
While you check those, most common causes:
|
|
1853
|
+
- Runaway query consuming resources
|
|
1854
|
+
- Table locked by failed migration
|
|
1855
|
+
- Connection pool exhausted
|
|
1856
|
+
- Disk full
|
|
1857
|
+
|
|
1858
|
+
What do you see in database logs?"
|
|
1859
|
+
|
|
1860
|
+
You: "There's a query that's been running for 10 minutes!
|
|
1861
|
+
Something about 'updating all user records'
|
|
1862
|
+
I don't recognize this."
|
|
1863
|
+
|
|
1864
|
+
Claude: "That's your problem! Someone or something triggered a mass update.
|
|
1865
|
+
|
|
1866
|
+
IMMEDIATE ACTION:
|
|
1867
|
+
1. Kill that query immediately:
|
|
1868
|
+
- Find process ID in your database
|
|
1869
|
+
- KILL [process_id];
|
|
1870
|
+
2. Identify who/what started it
|
|
1871
|
+
3. Prevent it from restarting
|
|
1872
|
+
|
|
1873
|
+
Can you access your database admin tool?"
|
|
1874
|
+
|
|
1875
|
+
You: "Killed it! Site is responding again.
|
|
1876
|
+
Found it - it was a scheduled maintenance script that ran
|
|
1877
|
+
at the wrong time. Should run at 3 AM, not 3 PM!"
|
|
1878
|
+
|
|
1879
|
+
Claude: "Classic timezone issue. Let's fix this properly:
|
|
1880
|
+
1. Immediate: Disable that scheduled job
|
|
1881
|
+
2. Short-term: Add time-of-day check in the script
|
|
1882
|
+
3. Long-term: Use UTC for all scheduled jobs
|
|
1883
|
+
4. Add monitoring for long-running queries
|
|
1884
|
+
|
|
1885
|
+
Here's how to implement these safeguards..."
|
|
1886
|
+
|
|
1887
|
+
```
|
|
1888
|
+
|
|
1889
|
+
### Common Debugging Patterns
|
|
1890
|
+
|
|
1891
|
+
**The Binary Search Pattern:**
|
|
1892
|
+
|
|
1893
|
+
```markdown
|
|
1894
|
+
You: "The app breaks somewhere in this 500-line function."
|
|
1895
|
+
|
|
1896
|
+
Claude: "Let's binary search for the problem:
|
|
1897
|
+
1. Comment out the bottom half
|
|
1898
|
+
2. Does it still break? Problem is in top half
|
|
1899
|
+
3. Narrow by half again
|
|
1900
|
+
4. Repeat until you find the exact line"
|
|
1901
|
+
|
|
1902
|
+
```
|
|
1903
|
+
|
|
1904
|
+
**The Time Machine Pattern:**
|
|
1905
|
+
|
|
1906
|
+
```markdown
|
|
1907
|
+
You: "It worked yesterday, broken today. No idea what changed."
|
|
1908
|
+
|
|
1909
|
+
Claude: "Let's use git to find when it broke:
|
|
1910
|
+
1. `git log --since='2 days ago' --oneline`
|
|
1911
|
+
2. Test each commit with `git checkout [hash]`
|
|
1912
|
+
3. Find the commit that introduced the bug
|
|
1913
|
+
4. `git diff [good-commit] [bad-commit]`"
|
|
1914
|
+
|
|
1915
|
+
```
|
|
1916
|
+
|
|
1917
|
+
**The Rubber Duck Pattern:**
|
|
1918
|
+
|
|
1919
|
+
```markdown
|
|
1920
|
+
You: "This should work but doesn't. Here's my code: [paste]
|
|
1921
|
+
It should do X but does Y instead."
|
|
1922
|
+
|
|
1923
|
+
Claude: "Walk me through what you expect to happen line by line.
|
|
1924
|
+
Often, explaining it will reveal the issue..."
|
|
1925
|
+
|
|
1926
|
+
You: "Oh wait, I see it now! I'm checking the wrong variable!"
|
|
1927
|
+
|
|
1928
|
+
```
|
|
1929
|
+
|
|
1930
|
+
**The Isolation Pattern:**
|
|
1931
|
+
|
|
1932
|
+
```markdown
|
|
1933
|
+
You: "This component breaks but only inside my app, not in isolation."
|
|
1934
|
+
|
|
1935
|
+
Claude: "Let's isolate the problem:
|
|
1936
|
+
1. Create a minimal reproduction
|
|
1937
|
+
2. Add back complexity piece by piece
|
|
1938
|
+
3. Find what integration causes the break
|
|
1939
|
+
4. Fix the interaction, not the component"
|
|
1940
|
+
|
|
1941
|
+
```
|
|
1942
|
+
|
|
1943
|
+
## Meta-Patterns: Tying It All Together
|
|
1944
|
+
|
|
1945
|
+
### The Daily Development Rhythm
|
|
1946
|
+
|
|
1947
|
+
```markdown
|
|
1948
|
+
Morning:
|
|
1949
|
+
- Review yesterday's work (Recovery Mode check)
|
|
1950
|
+
- Plan today's features (Discovery Mode if unclear)
|
|
1951
|
+
- Set up test harnesses (Production Mode for critical features)
|
|
1952
|
+
|
|
1953
|
+
Active Development:
|
|
1954
|
+
- Build features (Speed Mode for clear tasks)
|
|
1955
|
+
- Test as you go (match testing to risk)
|
|
1956
|
+
- Refactor when painful (Discovery Mode for understanding)
|
|
1957
|
+
|
|
1958
|
+
End of Day:
|
|
1959
|
+
- Run all tests (catch integration issues)
|
|
1960
|
+
- Document surprises (future you will thank you)
|
|
1961
|
+
- Commit working code (always have a safe point)
|
|
1962
|
+
|
|
1963
|
+
```
|
|
1964
|
+
|
|
1965
|
+
### Conversation Management
|
|
1966
|
+
|
|
1967
|
+
**Starting a New Session:**
|
|
1968
|
+
|
|
1969
|
+
```markdown
|
|
1970
|
+
You: "Continue working on [project name].
|
|
1971
|
+
Current structure: [paste file tree]
|
|
1972
|
+
Last time we: [brief summary]
|
|
1973
|
+
Today I want to: [clear goal]"
|
|
1974
|
+
|
|
1975
|
+
```
|
|
1976
|
+
|
|
1977
|
+
**Context Refreshing:**
|
|
1978
|
+
|
|
1979
|
+
```markdown
|
|
1980
|
+
You: "Here's where we are: [paste current code]
|
|
1981
|
+
It should: [expected behavior]
|
|
1982
|
+
But instead: [actual behavior]
|
|
1983
|
+
We've tried: [previous attempts]"
|
|
1984
|
+
|
|
1985
|
+
```
|
|
1986
|
+
|
|
1987
|
+
**Mode Switching Signals in Conversation:**
|
|
1988
|
+
|
|
1989
|
+
```markdown
|
|
1990
|
+
Claude: "This is getting complex..." → Consider switching to Discovery Mode
|
|
1991
|
+
Claude: "We should add tests..." → Consider Production Mode
|
|
1992
|
+
Claude: "Let's be careful here..." → Definitely Production Mode
|
|
1993
|
+
Claude: "Quick fix would be..." → You're in Speed Mode
|
|
1994
|
+
Claude: "First, let's understand..." → You're in Discovery Mode
|
|
1995
|
+
|
|
1996
|
+
```
|
|
1997
|
+
|
|
1998
|
+
### Progressive Enhancement Path
|
|
1999
|
+
|
|
2000
|
+
Your features should evolve through modes:
|
|
2001
|
+
|
|
2002
|
+
1. **Discovery** → Figure out what to build
|
|
2003
|
+
2. **Speed** → Build it quickly
|
|
2004
|
+
3. **Production** → Harden it for users
|
|
2005
|
+
4. **Refactor** → Clean it up
|
|
2006
|
+
5. **Test** → Ensure it stays working
|
|
2007
|
+
6. **Document** → Help future you
|
|
2008
|
+
|
|
2009
|
+
Not every feature needs all steps, but knowing the path helps you decide where to stop based on risk and value.
|
|
2010
|
+
|
|
2011
|
+
---
|
|
2012
|
+
|
|
2013
|
+
## Next Section Preview
|
|
2014
|
+
|
|
2015
|
+
The final part of this guide will cover:
|
|
2016
|
+
|
|
2017
|
+
- **Managing Complex Projects:** Architecture decisions and project organization
|
|
2018
|
+
- **Performance Optimization:** When and how to optimize
|
|
2019
|
+
- **Deployment and DevOps:** Getting code to production safely
|
|
2020
|
+
- **Team Collaboration:** Working with others in vibe coding
|
|
2021
|
+
- **Advanced Patterns:** Power user techniques and workflows
|
|
2022
|
+
|
|
2023
|
+
Each section will continue the mode-based approach with real-world examples and conversation templates.
|
|
2024
|
+
|
|
2025
|
+
# The Vibe Coding Operating System: Part 3
|
|
2026
|
+
|
|
2027
|
+
## 6. Managing Complex Projects
|
|
2028
|
+
|
|
2029
|
+
As your projects grow beyond single files and simple features, organization becomes critical. The challenge in vibe coding is that you're building the plane while flying it - you need structure, but not so much that it slows down your momentum.
|
|
2030
|
+
|
|
2031
|
+
### 🎯 Project Complexity Indicators
|
|
2032
|
+
|
|
2033
|
+
Your project needs structure when:
|
|
2034
|
+
|
|
2035
|
+
- You repeatedly explain the same context to Claude
|
|
2036
|
+
- You can't remember what files do what
|
|
2037
|
+
- Changes in one place break things elsewhere
|
|
2038
|
+
- You're afraid to refactor because you might miss something
|
|
2039
|
+
- New features take longer to add than they should
|
|
2040
|
+
- You have duplicate code in multiple places
|
|
2041
|
+
|
|
2042
|
+
### Project Organization Strategies
|
|
2043
|
+
|
|
2044
|
+
### 🚀 Speed Mode: Just Enough Structure
|
|
2045
|
+
|
|
2046
|
+
**When to use:**
|
|
2047
|
+
|
|
2048
|
+
- Personal projects that are growing
|
|
2049
|
+
- Prototypes becoming real products
|
|
2050
|
+
- 2-5 feature areas
|
|
2051
|
+
- You're the only developer
|
|
2052
|
+
|
|
2053
|
+
**Speed Mode Project Organization:**
|
|
2054
|
+
|
|
2055
|
+
```markdown
|
|
2056
|
+
You: "My expense tracker has grown to 15 files and I'm getting lost.
|
|
2057
|
+
There's components, API calls, utilities all mixed together.
|
|
2058
|
+
Here's my current structure: [paste file tree]
|
|
2059
|
+
How do I organize this better without overengineering?"
|
|
2060
|
+
|
|
2061
|
+
Claude: "Let's apply simple folder-by-feature organization:
|
|
2062
|
+
|
|
2063
|
+
Current (mixed):
|
|
2064
|
+
- Button.js
|
|
2065
|
+
- ExpenseAPI.js
|
|
2066
|
+
- UserProfile.js
|
|
2067
|
+
- calculateTax.js
|
|
2068
|
+
- ExpenseList.js
|
|
2069
|
+
|
|
2070
|
+
Better (by feature):
|
|
2071
|
+
/expenses
|
|
2072
|
+
- ExpenseList.js
|
|
2073
|
+
- ExpenseAPI.js
|
|
2074
|
+
- calculateTax.js
|
|
2075
|
+
/user
|
|
2076
|
+
- UserProfile.js
|
|
2077
|
+
/shared
|
|
2078
|
+
- Button.js
|
|
2079
|
+
|
|
2080
|
+
This keeps related code together. Let me reorganize..."
|
|
2081
|
+
|
|
2082
|
+
You: "That's cleaner! But now I have a problem - the Button is used
|
|
2083
|
+
in both expenses and user features. Where does it live?"
|
|
2084
|
+
|
|
2085
|
+
Claude: "Great question! Rules of thumb:
|
|
2086
|
+
- Used by 2+ features → /shared or /common
|
|
2087
|
+
- Used by everything → /components
|
|
2088
|
+
- Specific to one feature → keep it there
|
|
2089
|
+
|
|
2090
|
+
Since Button is generic, put it in /shared/components/"
|
|
2091
|
+
|
|
2092
|
+
You: "What about things like authentication? That's used everywhere
|
|
2093
|
+
but it's also its own feature."
|
|
2094
|
+
|
|
2095
|
+
Claude: "Auth is infrastructure, not a feature. Structure it like:
|
|
2096
|
+
/core (or /lib)
|
|
2097
|
+
/auth
|
|
2098
|
+
- authContext.js
|
|
2099
|
+
- useAuth.js
|
|
2100
|
+
- authAPI.js
|
|
2101
|
+
|
|
2102
|
+
This separates 'how the app works' from 'what the app does'"
|
|
2103
|
+
|
|
2104
|
+
```
|
|
2105
|
+
|
|
2106
|
+
### 🔍 Discovery Mode: Finding the Right Architecture
|
|
2107
|
+
|
|
2108
|
+
**When to use:**
|
|
2109
|
+
|
|
2110
|
+
- Unclear how features relate
|
|
2111
|
+
- Multiple valid organization approaches
|
|
2112
|
+
- Planning for future growth
|
|
2113
|
+
- Technical debt is accumulating
|
|
2114
|
+
|
|
2115
|
+
**Discovery Mode Architecture Exploration:**
|
|
2116
|
+
|
|
2117
|
+
```markdown
|
|
2118
|
+
You: "I'm building a project management tool. It has tasks, projects,
|
|
2119
|
+
teams, comments, files, notifications...
|
|
2120
|
+
It's becoming spaghetti. Every feature touches every other feature.
|
|
2121
|
+
How do I even think about organizing this?"
|
|
2122
|
+
|
|
2123
|
+
Claude: "This sounds like you need to discover your domain boundaries.
|
|
2124
|
+
Let's map out the relationships:
|
|
2125
|
+
|
|
2126
|
+
1. What depends on what?
|
|
2127
|
+
- Comments depend on Tasks/Projects
|
|
2128
|
+
- Notifications depend on everything
|
|
2129
|
+
- Files attach to Tasks/Projects
|
|
2130
|
+
- Teams own Projects
|
|
2131
|
+
|
|
2132
|
+
2. What changes together?
|
|
2133
|
+
- Tasks and Projects often change together
|
|
2134
|
+
- Comments and Notifications might change together
|
|
2135
|
+
- Teams and permissions change together
|
|
2136
|
+
|
|
2137
|
+
Based on this, I see three architectural approaches..."
|
|
2138
|
+
|
|
2139
|
+
You: "This is confusing. Can you show me what each would look like
|
|
2140
|
+
in practice? Like, where would the 'create task' code live?"
|
|
2141
|
+
|
|
2142
|
+
Claude: "Let me create three simple examples:
|
|
2143
|
+
|
|
2144
|
+
Option 1: Feature-based (what you have now)
|
|
2145
|
+
/tasks/createTask.js
|
|
2146
|
+
/projects/addTaskToProject.js
|
|
2147
|
+
Problem: Lots of cross-imports
|
|
2148
|
+
|
|
2149
|
+
Option 2: Domain-driven
|
|
2150
|
+
/workItems (tasks + projects together)
|
|
2151
|
+
/collaboration (comments + notifications)
|
|
2152
|
+
/teamManagement (teams + permissions)
|
|
2153
|
+
Better boundaries, less coupling
|
|
2154
|
+
|
|
2155
|
+
Option 3: Layered
|
|
2156
|
+
/presentation (all UI)
|
|
2157
|
+
/business (all logic)
|
|
2158
|
+
/data (all API/database)
|
|
2159
|
+
Clean separation but more abstraction
|
|
2160
|
+
|
|
2161
|
+
For your complexity level, I'd recommend Option 2..."
|
|
2162
|
+
|
|
2163
|
+
You: "OK Option 2 makes sense. But how do I migrate from my current mess
|
|
2164
|
+
to this without breaking everything?"
|
|
2165
|
+
|
|
2166
|
+
Claude: "Great question! Never reorganize everything at once. Instead:
|
|
2167
|
+
1. Create the new structure alongside the old
|
|
2168
|
+
2. Move one feature completely (like comments)
|
|
2169
|
+
3. Test everything still works
|
|
2170
|
+
4. Gradually migrate other features
|
|
2171
|
+
5. Delete old structure when empty
|
|
2172
|
+
|
|
2173
|
+
Let's start with your most isolated feature..."
|
|
2174
|
+
|
|
2175
|
+
```
|
|
2176
|
+
|
|
2177
|
+
### 🛠️ Production Mode: Scalable Architecture
|
|
2178
|
+
|
|
2179
|
+
**When to use:**
|
|
2180
|
+
|
|
2181
|
+
- Multiple developers
|
|
2182
|
+
- Enterprise requirements
|
|
2183
|
+
- Microservices or complex integrations
|
|
2184
|
+
- Need for different deployment strategies
|
|
2185
|
+
|
|
2186
|
+
**Production Mode Architecture:**
|
|
2187
|
+
|
|
2188
|
+
```markdown
|
|
2189
|
+
You: "We're rebuilding our customer portal as a proper product.
|
|
2190
|
+
Will have 3 developers, needs to handle 10k users,
|
|
2191
|
+
integrate with 5 external services, and meet SOC2 compliance.
|
|
2192
|
+
Current prototype is a Next.js monolith.
|
|
2193
|
+
What architecture do we need?"
|
|
2194
|
+
|
|
2195
|
+
Claude: "This requires Production-grade architecture. Let's design
|
|
2196
|
+
for your constraints:
|
|
2197
|
+
|
|
2198
|
+
REQUIREMENTS ANALYSIS:
|
|
2199
|
+
- 3 developers → need clear boundaries
|
|
2200
|
+
- 10k users → consider caching and database design
|
|
2201
|
+
- 5 integrations → need abstraction layer
|
|
2202
|
+
- SOC2 → need audit logging, security layers
|
|
2203
|
+
|
|
2204
|
+
RECOMMENDED ARCHITECTURE:
|
|
2205
|
+
1. Keep Next.js for frontend (it scales well)
|
|
2206
|
+
2. Separate API layer for business logic
|
|
2207
|
+
3. Service layer for integrations
|
|
2208
|
+
4. Event bus for audit logging
|
|
2209
|
+
|
|
2210
|
+
Let me show you the structure..."
|
|
2211
|
+
|
|
2212
|
+
You: "This looks really complex. We only have 3 developers and
|
|
2213
|
+
I'm not even a real engineer. Is this overkill?"
|
|
2214
|
+
|
|
2215
|
+
Claude: "You're right to push back! Let's simplify but keep the important
|
|
2216
|
+
parts for your requirements:
|
|
2217
|
+
|
|
2218
|
+
SIMPLIFIED PRODUCTION ARCHITECTURE:
|
|
2219
|
+
/app (Next.js)
|
|
2220
|
+
/pages
|
|
2221
|
+
/components
|
|
2222
|
+
/lib
|
|
2223
|
+
/api
|
|
2224
|
+
/routes (endpoints)
|
|
2225
|
+
/services (business logic)
|
|
2226
|
+
/integrations (external services)
|
|
2227
|
+
/shared
|
|
2228
|
+
/types (TypeScript interfaces)
|
|
2229
|
+
/utils
|
|
2230
|
+
/constants
|
|
2231
|
+
|
|
2232
|
+
This gives you:
|
|
2233
|
+
- Clear boundaries for 3 developers
|
|
2234
|
+
- Single deployment (easier DevOps)
|
|
2235
|
+
- Room to grow
|
|
2236
|
+
- SOC2 compliance capability"
|
|
2237
|
+
|
|
2238
|
+
You: "That's more manageable. But what about those external integrations?
|
|
2239
|
+
Each has different auth, different APIs, different error handling..."
|
|
2240
|
+
|
|
2241
|
+
Claude: "Perfect case for the Adapter pattern. Create a consistent
|
|
2242
|
+
interface for your app:
|
|
2243
|
+
|
|
2244
|
+
/integrations
|
|
2245
|
+
/adapter.js (common interface)
|
|
2246
|
+
/stripe
|
|
2247
|
+
- index.js (implements adapter)
|
|
2248
|
+
- auth.js
|
|
2249
|
+
- errors.js
|
|
2250
|
+
/sendgrid
|
|
2251
|
+
- index.js (implements adapter)
|
|
2252
|
+
- auth.js
|
|
2253
|
+
- errors.js
|
|
2254
|
+
|
|
2255
|
+
Your app only knows about the adapter interface,
|
|
2256
|
+
not the messy details of each service..."
|
|
2257
|
+
|
|
2258
|
+
```
|
|
2259
|
+
|
|
2260
|
+
### Managing Technical Debt
|
|
2261
|
+
|
|
2262
|
+
```markdown
|
|
2263
|
+
You: "I've been in Speed Mode for months. The app works but the code
|
|
2264
|
+
is embarrassing. When do I pay down technical debt?"
|
|
2265
|
+
|
|
2266
|
+
Claude: "Technical debt is like real debt - some is healthy, too much
|
|
2267
|
+
is dangerous. Let's assess yours:
|
|
2268
|
+
|
|
2269
|
+
HEALTHY DEBT (keep for now):
|
|
2270
|
+
- Verbose code that works
|
|
2271
|
+
- Some code duplication
|
|
2272
|
+
- Simple solutions to complex problems
|
|
2273
|
+
- Missing optimizations
|
|
2274
|
+
|
|
2275
|
+
DANGEROUS DEBT (fix soon):
|
|
2276
|
+
- Security vulnerabilities
|
|
2277
|
+
- No error handling
|
|
2278
|
+
- No backup strategy
|
|
2279
|
+
- Untested payment logic
|
|
2280
|
+
|
|
2281
|
+
CRIPPLING DEBT (fix immediately):
|
|
2282
|
+
- Can't add features without breaking others
|
|
2283
|
+
- Takes hours to understand simple code
|
|
2284
|
+
- Afraid to deploy
|
|
2285
|
+
- Data corruption risks
|
|
2286
|
+
|
|
2287
|
+
Which category are your main pain points in?"
|
|
2288
|
+
|
|
2289
|
+
You: "Mostly the middle - afraid to deploy, features break each other.
|
|
2290
|
+
But I have paying customers so I can't just stop and refactor."
|
|
2291
|
+
|
|
2292
|
+
Claude: "Classic growth challenge! Use the 'Boy Scout Rule':
|
|
2293
|
+
Leave code better than you found it.
|
|
2294
|
+
|
|
2295
|
+
PRACTICAL APPROACH:
|
|
2296
|
+
1. Every feature task includes 20% refactoring
|
|
2297
|
+
2. Refactor the code you're touching anyway
|
|
2298
|
+
3. Add tests before changing anything
|
|
2299
|
+
4. Create 'refactoring Fridays'
|
|
2300
|
+
|
|
2301
|
+
This gradually improves without stopping feature development..."
|
|
2302
|
+
|
|
2303
|
+
```
|
|
2304
|
+
|
|
2305
|
+
## 7. Performance Optimization
|
|
2306
|
+
|
|
2307
|
+
Performance in vibe coding is tricky because you might not know what's slow or why. The key is measuring before optimizing and understanding what actually matters to users.
|
|
2308
|
+
|
|
2309
|
+
### 🎯 When to Optimize
|
|
2310
|
+
|
|
2311
|
+
**Clear signals you need optimization:**
|
|
2312
|
+
|
|
2313
|
+
- Users complain about speed
|
|
2314
|
+
- You notice lag when using your own app
|
|
2315
|
+
- Hosting costs are growing faster than users
|
|
2316
|
+
- Browser shows performance warnings
|
|
2317
|
+
- Database queries time out
|
|
2318
|
+
|
|
2319
|
+
**DON'T optimize when:**
|
|
2320
|
+
|
|
2321
|
+
- It works fine for current users
|
|
2322
|
+
- You're guessing it might be slow
|
|
2323
|
+
- You have fewer than 100 users
|
|
2324
|
+
- The code isn't working correctly yet
|
|
2325
|
+
|
|
2326
|
+
### Performance Investigation Modes
|
|
2327
|
+
|
|
2328
|
+
### 🚀 Speed Mode: Quick Wins
|
|
2329
|
+
|
|
2330
|
+
**When to use:**
|
|
2331
|
+
|
|
2332
|
+
- Obvious performance problems
|
|
2333
|
+
- Known solutions
|
|
2334
|
+
- Local development only
|
|
2335
|
+
- Quick improvements needed
|
|
2336
|
+
|
|
2337
|
+
```markdown
|
|
2338
|
+
You: "My app takes 5 seconds to load the homepage.
|
|
2339
|
+
It's just a list of 100 tasks! This seems wrong.
|
|
2340
|
+
Here's the component: [paste code]"
|
|
2341
|
+
|
|
2342
|
+
Claude: "I see several quick wins:
|
|
2343
|
+
|
|
2344
|
+
1. You're loading ALL task data including comments
|
|
2345
|
+
- Only load what you display
|
|
2346
|
+
2. You're making 100 separate API calls in a loop!
|
|
2347
|
+
- Batch these into one call
|
|
2348
|
+
3. Large images loading immediately
|
|
2349
|
+
- Add lazy loading
|
|
2350
|
+
|
|
2351
|
+
Let's fix the API calls first - biggest impact..."
|
|
2352
|
+
|
|
2353
|
+
You: "Wow, down to 1 second just from batching the API calls!
|
|
2354
|
+
Why was I making separate calls?"
|
|
2355
|
+
|
|
2356
|
+
Claude: "Looks like you were mapping over tasks and fetching comments
|
|
2357
|
+
for each. Classic N+1 query problem.
|
|
2358
|
+
|
|
2359
|
+
Rule of thumb: If you're fetching in a loop, you're probably
|
|
2360
|
+
doing it wrong. Let's optimize the images next..."
|
|
2361
|
+
|
|
2362
|
+
```
|
|
2363
|
+
|
|
2364
|
+
### 🔍 Discovery Mode: Finding Bottlenecks
|
|
2365
|
+
|
|
2366
|
+
**When to use:**
|
|
2367
|
+
|
|
2368
|
+
- Unclear what's slow
|
|
2369
|
+
- Intermittent performance issues
|
|
2370
|
+
- Complex interactions
|
|
2371
|
+
- Need to understand before optimizing
|
|
2372
|
+
|
|
2373
|
+
```markdown
|
|
2374
|
+
You: "Users say the app is 'sometimes slow' but I can't reproduce it.
|
|
2375
|
+
It seems random. Sometimes search is instant, sometimes 10+ seconds.
|
|
2376
|
+
How do I even debug this?"
|
|
2377
|
+
|
|
2378
|
+
Claude: "Let's add performance monitoring to understand the pattern:
|
|
2379
|
+
|
|
2380
|
+
1. Add timing logs to key operations
|
|
2381
|
+
2. Log the size of data being processed
|
|
2382
|
+
3. Track which users experience slowness
|
|
2383
|
+
4. Monitor browser memory usage
|
|
2384
|
+
|
|
2385
|
+
Here's a simple performance logger..."
|
|
2386
|
+
|
|
2387
|
+
You: "Interesting! The logs show it's only slow for users with 1000+ items.
|
|
2388
|
+
And it gets slower the longer they use the app."
|
|
2389
|
+
|
|
2390
|
+
Claude: "That pattern suggests a memory leak or accumulating data.
|
|
2391
|
+
You're probably adding to arrays without ever cleaning up.
|
|
2392
|
+
|
|
2393
|
+
Let's check:
|
|
2394
|
+
1. Are you filtering arrays or creating new ones?
|
|
2395
|
+
2. Do you clear old data when fetching new?
|
|
2396
|
+
3. Are event listeners being removed?
|
|
2397
|
+
|
|
2398
|
+
Can you show me your data fetching code?"
|
|
2399
|
+
|
|
2400
|
+
You: "Oh... I'm using array.push() to add new items, and I never
|
|
2401
|
+
remove old ones. So users with lots of data keep growing arrays?"
|
|
2402
|
+
|
|
2403
|
+
Claude: "Exactly! You're keeping everything in memory forever.
|
|
2404
|
+
Solutions:
|
|
2405
|
+
1. Pagination - only load what's visible
|
|
2406
|
+
2. Virtual scrolling - render only visible items
|
|
2407
|
+
3. Data cleanup - remove old items
|
|
2408
|
+
4. Use database queries instead of in-memory filtering
|
|
2409
|
+
|
|
2410
|
+
Let's implement pagination first..."
|
|
2411
|
+
|
|
2412
|
+
```
|
|
2413
|
+
|
|
2414
|
+
### 🛠️ Production Mode: Systematic Optimization
|
|
2415
|
+
|
|
2416
|
+
**When to use:**
|
|
2417
|
+
|
|
2418
|
+
- Production performance issues
|
|
2419
|
+
- Need measurable improvements
|
|
2420
|
+
- Optimization affects architecture
|
|
2421
|
+
- Performance SLAs required
|
|
2422
|
+
|
|
2423
|
+
```markdown
|
|
2424
|
+
You: "Our dashboard takes 8 seconds to load for enterprise customers.
|
|
2425
|
+
They're threatening to cancel. CEO says fix it this week.
|
|
2426
|
+
It loads 50+ widgets with real-time data.
|
|
2427
|
+
Where do I start?"
|
|
2428
|
+
|
|
2429
|
+
Claude: "This needs systematic production optimization. Let's measure
|
|
2430
|
+
first, then optimize based on data:
|
|
2431
|
+
|
|
2432
|
+
STEP 1: Performance Profiling
|
|
2433
|
+
- Browser DevTools Performance tab
|
|
2434
|
+
- Backend APM (Application Performance Monitoring)
|
|
2435
|
+
- Database query analysis
|
|
2436
|
+
- Network waterfall analysis
|
|
2437
|
+
|
|
2438
|
+
Can you record a performance profile of the slow dashboard?"
|
|
2439
|
+
|
|
2440
|
+
You: "Here's the profile. I don't understand what I'm looking at though.
|
|
2441
|
+
Lots of red and yellow bars?"
|
|
2442
|
+
|
|
2443
|
+
Claude: "Let me interpret:
|
|
2444
|
+
- 3 seconds: Initial HTML/JS download (red flag #1)
|
|
2445
|
+
- 2 seconds: 50 sequential API calls (red flag #2)
|
|
2446
|
+
- 2 seconds: React re-rendering everything (red flag #3)
|
|
2447
|
+
- 1 second: Large images loading (red flag #4)
|
|
2448
|
+
|
|
2449
|
+
OPTIMIZATION PLAN:
|
|
2450
|
+
1. Parallel API calls (save 1.5s)
|
|
2451
|
+
2. Code splitting (save 2s)
|
|
2452
|
+
3. React.memo for widgets (save 1.5s)
|
|
2453
|
+
4. Image CDN (save 0.5s)
|
|
2454
|
+
|
|
2455
|
+
This would bring it down to ~2.5 seconds. Let's start..."
|
|
2456
|
+
|
|
2457
|
+
You: "We implemented parallel API calls and it's much faster!
|
|
2458
|
+
But now sometimes data is inconsistent between widgets?"
|
|
2459
|
+
|
|
2460
|
+
Claude: "That's a race condition from parallelization. We need to:
|
|
2461
|
+
1. Identify which widgets depend on each other
|
|
2462
|
+
2. Create dependency groups
|
|
2463
|
+
3. Parallelize groups, serialize within groups
|
|
2464
|
+
|
|
2465
|
+
Show me which widgets share data..."
|
|
2466
|
+
|
|
2467
|
+
```
|
|
2468
|
+
|
|
2469
|
+
### Common Performance Patterns
|
|
2470
|
+
|
|
2471
|
+
**The Pagination Pattern:**
|
|
2472
|
+
|
|
2473
|
+
```markdown
|
|
2474
|
+
You: "Showing 10,000 rows is killing the browser."
|
|
2475
|
+
|
|
2476
|
+
Claude: "Never render more than users can see:
|
|
2477
|
+
- Show 50 rows per page
|
|
2478
|
+
- Add 'Load More' or page numbers
|
|
2479
|
+
- Virtual scroll for infinite lists
|
|
2480
|
+
- Let database handle pagination"
|
|
2481
|
+
|
|
2482
|
+
```
|
|
2483
|
+
|
|
2484
|
+
**The Debounce Pattern:**
|
|
2485
|
+
|
|
2486
|
+
```markdown
|
|
2487
|
+
You: "Search fires on every keystroke and it's laggy."
|
|
2488
|
+
|
|
2489
|
+
Claude: "Wait for users to stop typing:
|
|
2490
|
+
```javascript
|
|
2491
|
+
const debounce = (func, wait) => {
|
|
2492
|
+
let timeout;
|
|
2493
|
+
return (...args) => {
|
|
2494
|
+
clearTimeout(timeout);
|
|
2495
|
+
timeout = setTimeout(() => func(...args), wait);
|
|
2496
|
+
};
|
|
2497
|
+
};
|
|
2498
|
+
|
|
2499
|
+
const debouncedSearch = debounce(search, 300);
|
|
2500
|
+
```"
|
|
2501
|
+
|
|
2502
|
+
```
|
|
2503
|
+
|
|
2504
|
+
**The Memoization Pattern:**
|
|
2505
|
+
|
|
2506
|
+
```markdown
|
|
2507
|
+
You: "This calculation runs on every render but data rarely changes."
|
|
2508
|
+
|
|
2509
|
+
Claude: "Cache the results:
|
|
2510
|
+
```javascript
|
|
2511
|
+
const expensiveResult = useMemo(() => {
|
|
2512
|
+
return calculateExpensive(data);
|
|
2513
|
+
}, [data]); // Only recalculate when data changes
|
|
2514
|
+
```"
|
|
2515
|
+
|
|
2516
|
+
```
|
|
2517
|
+
|
|
2518
|
+
**The Lazy Loading Pattern:**
|
|
2519
|
+
|
|
2520
|
+
```markdown
|
|
2521
|
+
You: "Page loads 100 images immediately."
|
|
2522
|
+
|
|
2523
|
+
Claude: "Load images as users scroll:
|
|
2524
|
+
- Use loading='lazy' attribute
|
|
2525
|
+
- Intersection Observer for custom logic
|
|
2526
|
+
- Placeholder images while loading
|
|
2527
|
+
- Progressive image loading (blur → full)"
|
|
2528
|
+
|
|
2529
|
+
```
|
|
2530
|
+
|
|
2531
|
+
## 8. Deployment and DevOps
|
|
2532
|
+
|
|
2533
|
+
Getting code from your computer to production is often the scariest part for non-engineers. The key is starting simple and adding complexity only when needed.
|
|
2534
|
+
|
|
2535
|
+
### 🎯 Deployment Complexity Levels
|
|
2536
|
+
|
|
2537
|
+
Choose based on your needs:
|
|
2538
|
+
|
|
2539
|
+
- **Level 0:** Local only (no deployment)
|
|
2540
|
+
- **Level 1:** Static hosting (GitHub Pages, Netlify, Vercel)
|
|
2541
|
+
- **Level 2:** Full-stack platform (Heroku, Railway, Render)
|
|
2542
|
+
- **Level 3:** Cloud services (AWS, Google Cloud, Azure)
|
|
2543
|
+
- **Level 4:** Kubernetes/Docker
|
|
2544
|
+
|
|
2545
|
+
### Deployment Modes
|
|
2546
|
+
|
|
2547
|
+
### 🚀 Speed Mode: Just Ship It
|
|
2548
|
+
|
|
2549
|
+
**When to use:**
|
|
2550
|
+
|
|
2551
|
+
- Personal projects
|
|
2552
|
+
- Prototypes and demos
|
|
2553
|
+
- Static sites
|
|
2554
|
+
- No sensitive data
|
|
2555
|
+
|
|
2556
|
+
```markdown
|
|
2557
|
+
You: "I built a portfolio site with React. How do I put it online?
|
|
2558
|
+
I've never deployed anything before."
|
|
2559
|
+
|
|
2560
|
+
Claude: "For a React portfolio, let's use Netlify - it's free and simple:
|
|
2561
|
+
|
|
2562
|
+
1. Build your React app: `npm run build`
|
|
2563
|
+
2. Go to netlify.com and sign up
|
|
2564
|
+
3. Drag your 'build' folder to their page
|
|
2565
|
+
4. Done! You'll get a URL immediately
|
|
2566
|
+
|
|
2567
|
+
Want to try it?"
|
|
2568
|
+
|
|
2569
|
+
You: "That worked! But the URL is random gibberish.
|
|
2570
|
+
Can I use my own domain?"
|
|
2571
|
+
|
|
2572
|
+
Claude: "Yes! Two options:
|
|
2573
|
+
1. Free: rename to yourname.netlify.app
|
|
2574
|
+
2. Paid: connect your own domain ($12/year)
|
|
2575
|
+
|
|
2576
|
+
For now, let's use the free subdomain..."
|
|
2577
|
+
|
|
2578
|
+
You: "Perfect! But now when I make changes, do I drag the folder again?"
|
|
2579
|
+
|
|
2580
|
+
Claude: "Better way - connect to GitHub:
|
|
2581
|
+
1. Push your code to GitHub
|
|
2582
|
+
2. Connect Netlify to your repo
|
|
2583
|
+
3. Now it auto-deploys when you push!
|
|
2584
|
+
|
|
2585
|
+
This is called CI/CD (Continuous Deployment)..."
|
|
2586
|
+
|
|
2587
|
+
```
|
|
2588
|
+
|
|
2589
|
+
### 🔍 Discovery Mode: Understanding Deployment
|
|
2590
|
+
|
|
2591
|
+
**When to use:**
|
|
2592
|
+
|
|
2593
|
+
- First time deploying backends
|
|
2594
|
+
- Choosing hosting providers
|
|
2595
|
+
- Understanding costs
|
|
2596
|
+
- Learning deployment concepts
|
|
2597
|
+
|
|
2598
|
+
```markdown
|
|
2599
|
+
You: "My expense tracker needs a backend now for multiple users.
|
|
2600
|
+
I have no idea how to deploy a full-stack app.
|
|
2601
|
+
What are my options and what will it cost?"
|
|
2602
|
+
|
|
2603
|
+
Claude: "Let's explore your options from simplest to most complex:
|
|
2604
|
+
|
|
2605
|
+
OPTION 1: All-in-One Platforms ($0-20/month)
|
|
2606
|
+
- Vercel/Netlify + Serverless functions
|
|
2607
|
+
- Railway/Render (full backend)
|
|
2608
|
+
- Heroku (more expensive now)
|
|
2609
|
+
Pros: Simple, managed, scales automatically
|
|
2610
|
+
Cons: Vendor lock-in, limited control
|
|
2611
|
+
|
|
2612
|
+
OPTION 2: VPS (Virtual Private Server) ($5-40/month)
|
|
2613
|
+
- DigitalOcean Droplet
|
|
2614
|
+
- Linode/Vultr
|
|
2615
|
+
Pros: Full control, multiple apps
|
|
2616
|
+
Cons: You manage everything
|
|
2617
|
+
|
|
2618
|
+
OPTION 3: Cloud Platforms (Pay per use)
|
|
2619
|
+
- AWS/Google Cloud/Azure
|
|
2620
|
+
Pros: Infinite scale, enterprise features
|
|
2621
|
+
Cons: Complex, easy to get surprise bills
|
|
2622
|
+
|
|
2623
|
+
For your first backend, I'd recommend Railway..."
|
|
2624
|
+
|
|
2625
|
+
You: "Railway sounds good but I don't understand - where does my
|
|
2626
|
+
database live? And how do secrets like API keys work?"
|
|
2627
|
+
|
|
2628
|
+
Claude: "Great questions! Let me explain the pieces:
|
|
2629
|
+
|
|
2630
|
+
1. DATABASE:
|
|
2631
|
+
- Railway provides PostgreSQL ($5/month)
|
|
2632
|
+
- Or use free tier of Supabase/Neon
|
|
2633
|
+
- Database lives separately from your code
|
|
2634
|
+
|
|
2635
|
+
2. SECRETS (Environment Variables):
|
|
2636
|
+
- Never put API keys in code
|
|
2637
|
+
- Add them in Railway's dashboard
|
|
2638
|
+
- Your code reads them with process.env.API_KEY
|
|
2639
|
+
|
|
2640
|
+
3. FILE STORAGE:
|
|
2641
|
+
- Don't store uploads on the server
|
|
2642
|
+
- Use Cloudinary (images) or S3 (files)
|
|
2643
|
+
- Server just saves the URLs
|
|
2644
|
+
|
|
2645
|
+
Want me to walk through setting this up?"
|
|
2646
|
+
|
|
2647
|
+
```
|
|
2648
|
+
|
|
2649
|
+
### 🛠️ Production Mode: Reliable Deployments
|
|
2650
|
+
|
|
2651
|
+
**When to use:**
|
|
2652
|
+
|
|
2653
|
+
- Business-critical applications
|
|
2654
|
+
- Need zero-downtime deployments
|
|
2655
|
+
- Multiple environments (dev/staging/prod)
|
|
2656
|
+
- Team deployments
|
|
2657
|
+
|
|
2658
|
+
```markdown
|
|
2659
|
+
You: "We're deploying our SaaS to real customers.
|
|
2660
|
+
Currently using Heroku but deployments are scary.
|
|
2661
|
+
Sometimes things break and we don't know until customers complain.
|
|
2662
|
+
How do we deploy safely?"
|
|
2663
|
+
|
|
2664
|
+
Claude: "You need a production deployment pipeline. Let's build
|
|
2665
|
+
safety layers:
|
|
2666
|
+
|
|
2667
|
+
1. MULTIPLE ENVIRONMENTS:
|
|
2668
|
+
- Development (for active coding)
|
|
2669
|
+
- Staging (production mirror for testing)
|
|
2670
|
+
- Production (what customers use)
|
|
2671
|
+
|
|
2672
|
+
2. DEPLOYMENT CHECKLIST:
|
|
2673
|
+
□ All tests passing
|
|
2674
|
+
□ Database migrations reviewed
|
|
2675
|
+
□ Environment variables confirmed
|
|
2676
|
+
□ Rollback plan ready
|
|
2677
|
+
□ Team notified
|
|
2678
|
+
|
|
2679
|
+
3. GRADUAL ROLLOUT:
|
|
2680
|
+
- Deploy to staging first
|
|
2681
|
+
- Test everything
|
|
2682
|
+
- Deploy to production
|
|
2683
|
+
- Monitor for errors
|
|
2684
|
+
- Ready to rollback
|
|
2685
|
+
|
|
2686
|
+
Let's set up staging first..."
|
|
2687
|
+
|
|
2688
|
+
You: "We set up staging but it's expensive running two environments.
|
|
2689
|
+
Also, how do we manage different database data?"
|
|
2690
|
+
|
|
2691
|
+
Claude: "Cost optimization strategies:
|
|
2692
|
+
1. Staging can be smaller (fewer resources)
|
|
2693
|
+
2. Turn off staging when not testing
|
|
2694
|
+
3. Share non-critical resources
|
|
2695
|
+
|
|
2696
|
+
For databases:
|
|
2697
|
+
1. Production: Real customer data (protected)
|
|
2698
|
+
2. Staging: Anonymized copy or synthetic data
|
|
2699
|
+
3. Never use production data in staging
|
|
2700
|
+
|
|
2701
|
+
Here's a script to anonymize production data for staging..."
|
|
2702
|
+
|
|
2703
|
+
You: "Last deployment we had 5 minutes of downtime during database
|
|
2704
|
+
migration. Customers were angry. How do we deploy with zero downtime?"
|
|
2705
|
+
|
|
2706
|
+
Claude: "Zero-downtime deployments require careful coordination:
|
|
2707
|
+
|
|
2708
|
+
1. BLUE-GREEN DEPLOYMENT:
|
|
2709
|
+
- Run old and new versions simultaneously
|
|
2710
|
+
- Switch traffic when new version is ready
|
|
2711
|
+
- Instant rollback if issues
|
|
2712
|
+
|
|
2713
|
+
2. DATABASE MIGRATIONS:
|
|
2714
|
+
- Only backwards-compatible changes
|
|
2715
|
+
- Add columns, don't remove
|
|
2716
|
+
- Deploy code that works with both schemas
|
|
2717
|
+
- Clean up old columns later
|
|
2718
|
+
|
|
2719
|
+
3. FEATURE FLAGS:
|
|
2720
|
+
- Deploy code but don't activate features
|
|
2721
|
+
- Gradually enable for users
|
|
2722
|
+
- Instant disable if problems
|
|
2723
|
+
|
|
2724
|
+
Let me show you how to implement blue-green..."
|
|
2725
|
+
|
|
2726
|
+
```
|
|
2727
|
+
|
|
2728
|
+
### DevOps Essentials
|
|
2729
|
+
|
|
2730
|
+
**Version Control (Git):**
|
|
2731
|
+
|
|
2732
|
+
```markdown
|
|
2733
|
+
You: "I keep breaking things and can't go back to working versions.
|
|
2734
|
+
I heard Git helps but it seems complicated."
|
|
2735
|
+
|
|
2736
|
+
Claude: "Git is your safety net. Let's start with just 4 commands:
|
|
2737
|
+
|
|
2738
|
+
1. `git init` - Start tracking changes
|
|
2739
|
+
2. `git add .` - Stage your changes
|
|
2740
|
+
3. `git commit -m 'describe changes'` - Save snapshot
|
|
2741
|
+
4. `git push` - Backup to GitHub
|
|
2742
|
+
|
|
2743
|
+
That's 90% of what you need. Try it!"
|
|
2744
|
+
|
|
2745
|
+
You: "I committed broken code by accident! How do I go back?"
|
|
2746
|
+
|
|
2747
|
+
Claude: "No problem! Few options:
|
|
2748
|
+
1. See history: `git log --oneline`
|
|
2749
|
+
2. Go back temporarily: `git checkout [commit-id]`
|
|
2750
|
+
3. Undo last commit: `git reset HEAD~1`
|
|
2751
|
+
4. Nuclear option: `git reset --hard [good-commit]`
|
|
2752
|
+
|
|
2753
|
+
Which situation are you in?"
|
|
2754
|
+
|
|
2755
|
+
```
|
|
2756
|
+
|
|
2757
|
+
**Environment Management:**
|
|
2758
|
+
|
|
2759
|
+
```markdown
|
|
2760
|
+
You: "My app works locally but breaks in production.
|
|
2761
|
+
Different API URLs, different database, different everything.
|
|
2762
|
+
How do I manage this?"
|
|
2763
|
+
|
|
2764
|
+
Claude: "Environment variables are the solution:
|
|
2765
|
+
|
|
2766
|
+
1. Create .env.local (development):
|
|
2767
|
+
```
|
|
2768
|
+
DATABASE_URL=localhost:5432
|
|
2769
|
+
API_URL=http://localhost:3000
|
|
2770
|
+
```
|
|
2771
|
+
|
|
2772
|
+
2. Create .env.production (production):
|
|
2773
|
+
```
|
|
2774
|
+
DATABASE_URL=prod-database.com
|
|
2775
|
+
API_URL=https://api.myapp.com
|
|
2776
|
+
```
|
|
2777
|
+
|
|
2778
|
+
3. In your code:
|
|
2779
|
+
```javascript
|
|
2780
|
+
const apiUrl = process.env.API_URL
|
|
2781
|
+
```
|
|
2782
|
+
|
|
2783
|
+
4. CRITICAL: Add .env* to .gitignore
|
|
2784
|
+
Never commit secrets to Git!"
|
|
2785
|
+
|
|
2786
|
+
```
|
|
2787
|
+
|
|
2788
|
+
**Monitoring and Logging:**
|
|
2789
|
+
|
|
2790
|
+
```markdown
|
|
2791
|
+
You: "Production is broken but I can't see what's happening.
|
|
2792
|
+
How do I debug production issues?"
|
|
2793
|
+
|
|
2794
|
+
Claude: "You need visibility into production:
|
|
2795
|
+
|
|
2796
|
+
1. ERROR TRACKING (Sentry - free tier):
|
|
2797
|
+
- Catches all errors automatically
|
|
2798
|
+
- Shows stack traces
|
|
2799
|
+
- Alerts you immediately
|
|
2800
|
+
|
|
2801
|
+
2. LOGGING (LogTail/Papertrail):
|
|
2802
|
+
- See what's happening in real-time
|
|
2803
|
+
- Search through historical logs
|
|
2804
|
+
- Track user actions
|
|
2805
|
+
|
|
2806
|
+
3. UPTIME MONITORING (UptimeRobot):
|
|
2807
|
+
- Checks if site is up every 5 minutes
|
|
2808
|
+
- Alerts if down
|
|
2809
|
+
- Shows uptime percentage
|
|
2810
|
+
|
|
2811
|
+
Start with Sentry - most bang for buck..."
|
|
2812
|
+
|
|
2813
|
+
```
|
|
2814
|
+
|
|
2815
|
+
## 9. Team Collaboration
|
|
2816
|
+
|
|
2817
|
+
Vibe coding with a team is different from solo work. You need to balance the speed of conversational development with the consistency needs of multiple developers.
|
|
2818
|
+
|
|
2819
|
+
### 🎯 Collaboration Challenges
|
|
2820
|
+
|
|
2821
|
+
Common issues when teams use Claude:
|
|
2822
|
+
|
|
2823
|
+
- Different coding styles from different conversations
|
|
2824
|
+
- Duplicate solutions to similar problems
|
|
2825
|
+
- Context loss between team members
|
|
2826
|
+
- Inconsistent architectural decisions
|
|
2827
|
+
- Security/quality variance
|
|
2828
|
+
|
|
2829
|
+
### Team Collaboration Modes
|
|
2830
|
+
|
|
2831
|
+
### 🚀 Speed Mode: Small Team Sync
|
|
2832
|
+
|
|
2833
|
+
**When to use:**
|
|
2834
|
+
|
|
2835
|
+
- 2-3 person teams
|
|
2836
|
+
- Informal collaboration
|
|
2837
|
+
- Rapid prototyping
|
|
2838
|
+
- Hackathons
|
|
2839
|
+
|
|
2840
|
+
```markdown
|
|
2841
|
+
You: "My co-founder and I both use Claude to code.
|
|
2842
|
+
We keep stepping on each other's work and solving
|
|
2843
|
+
the same problems differently. How do we coordinate?"
|
|
2844
|
+
|
|
2845
|
+
Claude: "For a small team moving fast, you need lightweight coordination:
|
|
2846
|
+
|
|
2847
|
+
1. DAILY SYNC (5 minutes):
|
|
2848
|
+
- What I built yesterday
|
|
2849
|
+
- What I'm building today
|
|
2850
|
+
- Any blockers or decisions needed
|
|
2851
|
+
|
|
2852
|
+
2. SHARED CONTEXT DOC:
|
|
2853
|
+
- Current architecture decisions
|
|
2854
|
+
- Claude prompts that worked well
|
|
2855
|
+
- Patterns we're using
|
|
2856
|
+
- Problems we've solved
|
|
2857
|
+
|
|
2858
|
+
3. CLEAR OWNERSHIP:
|
|
2859
|
+
- You: Frontend + user features
|
|
2860
|
+
- Co-founder: Backend + API
|
|
2861
|
+
- Shared: Database schema
|
|
2862
|
+
|
|
2863
|
+
4. PROMPT SHARING:
|
|
2864
|
+
When you get good results from Claude,
|
|
2865
|
+
share the prompt in Slack"
|
|
2866
|
+
|
|
2867
|
+
You: "We tried splitting frontend/backend but we both need to
|
|
2868
|
+
touch both parts sometimes. Gets messy."
|
|
2869
|
+
|
|
2870
|
+
Claude: "Try feature ownership instead:
|
|
2871
|
+
- You own: Authentication flow
|
|
2872
|
+
- They own: Payment flow
|
|
2873
|
+
- Whoever owns it makes all changes
|
|
2874
|
+
|
|
2875
|
+
For shared code (like database):
|
|
2876
|
+
- Quick Slack message before changing
|
|
2877
|
+
- Or pair program for 30 minutes
|
|
2878
|
+
- 'Whoever breaks it, fixes it' rule"
|
|
2879
|
+
|
|
2880
|
+
```
|
|
2881
|
+
|
|
2882
|
+
### 🔍 Discovery Mode: Team Alignment
|
|
2883
|
+
|
|
2884
|
+
**When to use:**
|
|
2885
|
+
|
|
2886
|
+
- Establishing team practices
|
|
2887
|
+
- Onboarding new developers
|
|
2888
|
+
- Standardizing approaches
|
|
2889
|
+
- Resolving style conflicts
|
|
2890
|
+
|
|
2891
|
+
```markdown
|
|
2892
|
+
You: "We now have 3 developers using Claude. Everyone's code looks
|
|
2893
|
+
completely different. It's chaos. How do we standardize without
|
|
2894
|
+
losing the speed of vibe coding?"
|
|
2895
|
+
|
|
2896
|
+
Claude: "You need team conventions without crushing creativity.
|
|
2897
|
+
Let's establish minimal viable standards:
|
|
2898
|
+
|
|
2899
|
+
1. PROMPT TEMPLATES:
|
|
2900
|
+
Create standard prompts for common tasks:
|
|
2901
|
+
```
|
|
2902
|
+
'Add a new API endpoint for [feature].
|
|
2903
|
+
Follow our REST conventions:
|
|
2904
|
+
- POST for create, GET for read, etc.
|
|
2905
|
+
- Return format: {data: ..., error: ...}
|
|
2906
|
+
- Include input validation
|
|
2907
|
+
- Add to our API documentation'
|
|
2908
|
+
```
|
|
2909
|
+
|
|
2910
|
+
2. STYLE GUIDE (keep it simple):
|
|
2911
|
+
- File naming: camelCase or kebab-case?
|
|
2912
|
+
- Component structure: functional or class?
|
|
2913
|
+
- State management: Context or Redux?
|
|
2914
|
+
- Error handling: try/catch or .catch?
|
|
2915
|
+
|
|
2916
|
+
3. REVIEW PATTERNS:
|
|
2917
|
+
Not traditional code review, but:
|
|
2918
|
+
- 'Show and tell' of Claude solutions
|
|
2919
|
+
- 'I'm stuck' help sessions
|
|
2920
|
+
- Weekly 'what we learned' sharing"
|
|
2921
|
+
|
|
2922
|
+
You: "How do we decide on conventions? Everyone has preferences
|
|
2923
|
+
and I don't know what's actually better."
|
|
2924
|
+
|
|
2925
|
+
Claude: "Don't overthink it. Pick what the team knows:
|
|
2926
|
+
|
|
2927
|
+
1. Vote on top 5 decisions:
|
|
2928
|
+
- File structure
|
|
2929
|
+
- Naming conventions
|
|
2930
|
+
- Component patterns
|
|
2931
|
+
- Error handling
|
|
2932
|
+
- State management
|
|
2933
|
+
|
|
2934
|
+
2. Try for one sprint/week
|
|
2935
|
+
|
|
2936
|
+
3. Adjust what's painful
|
|
2937
|
+
|
|
2938
|
+
The 'best' pattern is the one your team
|
|
2939
|
+
actually follows consistently"
|
|
2940
|
+
|
|
2941
|
+
```
|
|
2942
|
+
|
|
2943
|
+
### 🛠️ Production Mode: Scaled Team Process
|
|
2944
|
+
|
|
2945
|
+
**When to use:**
|
|
2946
|
+
|
|
2947
|
+
- 5+ developers
|
|
2948
|
+
- Multiple Claude users
|
|
2949
|
+
- Production applications
|
|
2950
|
+
- Compliance requirements
|
|
2951
|
+
|
|
2952
|
+
```markdown
|
|
2953
|
+
You: "We have 8 developers, half using Claude, half traditional.
|
|
2954
|
+
Need quality control but don't want to lose speed.
|
|
2955
|
+
Management wants 'process' but developers want freedom.
|
|
2956
|
+
Help?"
|
|
2957
|
+
|
|
2958
|
+
Claude: "You need balanced process - enough for quality, not so much
|
|
2959
|
+
it kills productivity:
|
|
2960
|
+
|
|
2961
|
+
TIERED REVIEW PROCESS:
|
|
2962
|
+
|
|
2963
|
+
Tier 1: Speed (no review needed)
|
|
2964
|
+
- UI tweaks
|
|
2965
|
+
- Copy changes
|
|
2966
|
+
- Internal tools
|
|
2967
|
+
- Bug fixes in own code
|
|
2968
|
+
|
|
2969
|
+
Tier 2: Peer Check (quick review)
|
|
2970
|
+
- New features
|
|
2971
|
+
- API changes
|
|
2972
|
+
- Database modifications
|
|
2973
|
+
- Claude-generated algorithms
|
|
2974
|
+
|
|
2975
|
+
Tier 3: Team Review (careful review)
|
|
2976
|
+
- Authentication/security
|
|
2977
|
+
- Payment processing
|
|
2978
|
+
- Core business logic
|
|
2979
|
+
- Architecture changes
|
|
2980
|
+
|
|
2981
|
+
CLAUDE-SPECIFIC PRACTICES:
|
|
2982
|
+
|
|
2983
|
+
1. Prompt Library:
|
|
2984
|
+
- Tested prompts for common patterns
|
|
2985
|
+
- Security-focused prompts
|
|
2986
|
+
- Performance-aware prompts
|
|
2987
|
+
|
|
2988
|
+
2. Claude Code Standards:
|
|
2989
|
+
- Always request tests with code
|
|
2990
|
+
- Ask for error handling explicitly
|
|
2991
|
+
- Request documentation inline
|
|
2992
|
+
|
|
2993
|
+
3. Verification Checklist:
|
|
2994
|
+
□ Claude's solution makes sense
|
|
2995
|
+
□ No obvious security issues
|
|
2996
|
+
□ Follows team patterns
|
|
2997
|
+
□ Has error handling
|
|
2998
|
+
□ Includes basic tests"
|
|
2999
|
+
|
|
3000
|
+
You: "The traditional coders are skeptical of Claude-generated code.
|
|
3001
|
+
They think it's all copy-paste garbage. How do we bridge this?"
|
|
3002
|
+
|
|
3003
|
+
Claude: "Address the skepticism with transparency and quality:
|
|
3004
|
+
|
|
3005
|
+
1. EDUCATION:
|
|
3006
|
+
Show Claude as pair programmer, not code generator
|
|
3007
|
+
- Share your conversation process
|
|
3008
|
+
- Show how you iterate and refine
|
|
3009
|
+
- Demonstrate catching Claude's mistakes
|
|
3010
|
+
|
|
3011
|
+
2. QUALITY GATES:
|
|
3012
|
+
Same standards for all code:
|
|
3013
|
+
- Must pass linting
|
|
3014
|
+
- Must have tests
|
|
3015
|
+
- Must handle errors
|
|
3016
|
+
- Must be readable
|
|
3017
|
+
|
|
3018
|
+
3. MIXED PAIRING:
|
|
3019
|
+
- Traditional dev + Claude user
|
|
3020
|
+
- Claude for exploration, human for refinement
|
|
3021
|
+
- Best of both worlds
|
|
3022
|
+
|
|
3023
|
+
4. SUCCESS METRICS:
|
|
3024
|
+
Track objective metrics:
|
|
3025
|
+
- Bug rates (Claude vs traditional)
|
|
3026
|
+
- Development speed
|
|
3027
|
+
- Code review issues
|
|
3028
|
+
Let data drive decisions"
|
|
3029
|
+
|
|
3030
|
+
```
|
|
3031
|
+
|
|
3032
|
+
### Collaboration Patterns
|
|
3033
|
+
|
|
3034
|
+
**The Context Handoff:**
|
|
3035
|
+
|
|
3036
|
+
```markdown
|
|
3037
|
+
You: "I'm going on vacation. How do I hand off my Claude work
|
|
3038
|
+
to my teammate?"
|
|
3039
|
+
|
|
3040
|
+
Claude: "Create a comprehensive handoff document:
|
|
3041
|
+
|
|
3042
|
+
1. PROJECT STATE:
|
|
3043
|
+
- What's working
|
|
3044
|
+
- What's in progress
|
|
3045
|
+
- What's broken
|
|
3046
|
+
- Recent decisions made
|
|
3047
|
+
|
|
3048
|
+
2. CLAUDE CONTEXT:
|
|
3049
|
+
- Successful prompts used
|
|
3050
|
+
- Patterns established
|
|
3051
|
+
- Problems solved
|
|
3052
|
+
- Gotchas discovered
|
|
3053
|
+
|
|
3054
|
+
3. NEXT STEPS:
|
|
3055
|
+
- Priority order
|
|
3056
|
+
- Blocking issues
|
|
3057
|
+
- Decisions needed
|
|
3058
|
+
|
|
3059
|
+
4. RECOVERY INFO:
|
|
3060
|
+
- How to rollback if needed
|
|
3061
|
+
- Who to contact for what
|
|
3062
|
+
- Where backups are"
|
|
3063
|
+
|
|
3064
|
+
```
|
|
3065
|
+
|
|
3066
|
+
**The Pair Vibe-Coding:**
|
|
3067
|
+
|
|
3068
|
+
```markdown
|
|
3069
|
+
You: "Want to try pair programming with Claude. How does that work?"
|
|
3070
|
+
|
|
3071
|
+
Claude: "Pair vibe-coding can be very effective:
|
|
3072
|
+
|
|
3073
|
+
1. DRIVER-NAVIGATOR:
|
|
3074
|
+
- Driver: Types and talks to Claude
|
|
3075
|
+
- Navigator: Thinks strategically
|
|
3076
|
+
- Switch every 30 minutes
|
|
3077
|
+
|
|
3078
|
+
2. DIALOGUE APPROACH:
|
|
3079
|
+
- Discuss approach together
|
|
3080
|
+
- Driver prompts Claude
|
|
3081
|
+
- Both evaluate response
|
|
3082
|
+
- Refine together
|
|
3083
|
+
|
|
3084
|
+
3. PROBLEM-SOLUTION:
|
|
3085
|
+
- Person A explains problem
|
|
3086
|
+
- Person B prompts Claude
|
|
3087
|
+
- Both review solution
|
|
3088
|
+
- Learn each other's approaches"
|
|
3089
|
+
|
|
3090
|
+
```
|
|
3091
|
+
|
|
3092
|
+
## 10. Advanced Patterns
|
|
3093
|
+
|
|
3094
|
+
These are power-user techniques that you develop after months of vibe coding. They're not necessary but can dramatically improve your effectiveness.
|
|
3095
|
+
|
|
3096
|
+
### Advanced Prompting Patterns
|
|
3097
|
+
|
|
3098
|
+
**The Iterative Refinement Pattern:**
|
|
3099
|
+
|
|
3100
|
+
```markdown
|
|
3101
|
+
You: "Build a task manager with projects and tags."
|
|
3102
|
+
|
|
3103
|
+
Claude: [Creates basic version]
|
|
3104
|
+
|
|
3105
|
+
You: "Good foundation. Now:
|
|
3106
|
+
1. Add drag-and-drop between projects
|
|
3107
|
+
2. Keep existing functionality
|
|
3108
|
+
3. Make the animation smooth"
|
|
3109
|
+
|
|
3110
|
+
Claude: [Enhances with specific features]
|
|
3111
|
+
|
|
3112
|
+
You: "Perfect. Final refinements:
|
|
3113
|
+
- Persist order to localStorage
|
|
3114
|
+
- Add keyboard shortcuts (space to toggle, delete to remove)
|
|
3115
|
+
- Show count badges on projects"
|
|
3116
|
+
|
|
3117
|
+
Claude: [Polishes to completion]
|
|
3118
|
+
|
|
3119
|
+
```
|
|
3120
|
+
|
|
3121
|
+
**The Constraint-Driven Pattern:**
|
|
3122
|
+
|
|
3123
|
+
```markdown
|
|
3124
|
+
You: "Create a dashboard but with these constraints:
|
|
3125
|
+
- Must load in under 2 seconds
|
|
3126
|
+
- No external dependencies except React
|
|
3127
|
+
- Works on mobile devices
|
|
3128
|
+
- Accessible (WCAG AA compliant)
|
|
3129
|
+
Start with performance in mind."
|
|
3130
|
+
|
|
3131
|
+
Claude: [Creates optimized solution from the start]
|
|
3132
|
+
|
|
3133
|
+
```
|
|
3134
|
+
|
|
3135
|
+
**The Test-First Pattern:**
|
|
3136
|
+
|
|
3137
|
+
```markdown
|
|
3138
|
+
You: "I need a function that calculates compound interest.
|
|
3139
|
+
First, write comprehensive tests for these scenarios:
|
|
3140
|
+
- Monthly/yearly compounding
|
|
3141
|
+
- Different initial amounts
|
|
3142
|
+
- Varying interest rates
|
|
3143
|
+
- Edge cases (0%, negative amounts)
|
|
3144
|
+
Then implement the function to pass all tests."
|
|
3145
|
+
|
|
3146
|
+
Claude: [Writes tests then implementation]
|
|
3147
|
+
|
|
3148
|
+
```
|
|
3149
|
+
|
|
3150
|
+
**The Socratic Pattern:**
|
|
3151
|
+
|
|
3152
|
+
```markdown
|
|
3153
|
+
You: "I'm building a real-time collaboration feature.
|
|
3154
|
+
Instead of implementing it directly, help me think through:
|
|
3155
|
+
- What are the core technical challenges?
|
|
3156
|
+
- What are my architecture options?
|
|
3157
|
+
- What are the trade-offs of each?
|
|
3158
|
+
- What would you recommend for my constraints?"
|
|
3159
|
+
|
|
3160
|
+
Claude: [Engages in architectural discussion before coding]
|
|
3161
|
+
|
|
3162
|
+
```
|
|
3163
|
+
|
|
3164
|
+
### Context Management Mastery
|
|
3165
|
+
|
|
3166
|
+
**The Living Document Pattern:**
|
|
3167
|
+
|
|
3168
|
+
```markdown
|
|
3169
|
+
You: "Here's my project status document. I'll maintain this
|
|
3170
|
+
and include it at the start of each conversation:
|
|
3171
|
+
|
|
3172
|
+
PROJECT: Task Manager
|
|
3173
|
+
STATUS: Core features complete, working on collaboration
|
|
3174
|
+
STACK: Next.js, PostgreSQL, Tailwind
|
|
3175
|
+
DECISIONS:
|
|
3176
|
+
- Using server-side rendering for SEO
|
|
3177
|
+
- JWT for auth (not sessions)
|
|
3178
|
+
- Optimistic UI updates
|
|
3179
|
+
CURRENT FOCUS: Adding real-time sync
|
|
3180
|
+
|
|
3181
|
+
[Now continue with specific request]"
|
|
3182
|
+
|
|
3183
|
+
```
|
|
3184
|
+
|
|
3185
|
+
**The Checkpoint Pattern:**
|
|
3186
|
+
|
|
3187
|
+
```markdown
|
|
3188
|
+
You: "We've made good progress. Create a checkpoint summary:
|
|
3189
|
+
- What we built today
|
|
3190
|
+
- Key decisions made
|
|
3191
|
+
- Current file structure
|
|
3192
|
+
- Next logical steps
|
|
3193
|
+
I'll use this to start tomorrow's session."
|
|
3194
|
+
|
|
3195
|
+
Claude: [Creates comprehensive checkpoint]
|
|
3196
|
+
|
|
3197
|
+
```
|
|
3198
|
+
|
|
3199
|
+
### Advanced Debugging Patterns
|
|
3200
|
+
|
|
3201
|
+
**The Hypothesis-Driven Debug:**
|
|
3202
|
+
|
|
3203
|
+
```markdown
|
|
3204
|
+
You: "Bug: User data sometimes doesn't save.
|
|
3205
|
+
|
|
3206
|
+
Hypotheses:
|
|
3207
|
+
1. Race condition in save function
|
|
3208
|
+
2. Validation failing silently
|
|
3209
|
+
3. Database connection dropping
|
|
3210
|
+
|
|
3211
|
+
Help me design experiments to test each hypothesis."
|
|
3212
|
+
|
|
3213
|
+
Claude: [Creates targeted debugging experiments]
|
|
3214
|
+
|
|
3215
|
+
```
|
|
3216
|
+
|
|
3217
|
+
**The Binary Search Debug:**
|
|
3218
|
+
|
|
3219
|
+
```markdown
|
|
3220
|
+
You: "This worked in commit A, broken in commit Z.
|
|
3221
|
+
Help me write a script to binary search through commits
|
|
3222
|
+
to find exactly where it broke."
|
|
3223
|
+
|
|
3224
|
+
Claude: [Creates git bisect automation]
|
|
3225
|
+
|
|
3226
|
+
```
|
|
3227
|
+
|
|
3228
|
+
### Performance Power Patterns
|
|
3229
|
+
|
|
3230
|
+
**The Progressive Enhancement Pattern:**
|
|
3231
|
+
|
|
3232
|
+
```markdown
|
|
3233
|
+
You: "Build this feature in three stages:
|
|
3234
|
+
1. Basic functionality (works on any device)
|
|
3235
|
+
2. Enhanced experience (modern browsers)
|
|
3236
|
+
3. Premium performance (latest devices)
|
|
3237
|
+
Detect capabilities and serve appropriate version."
|
|
3238
|
+
|
|
3239
|
+
```
|
|
3240
|
+
|
|
3241
|
+
**The Budget-Driven Pattern:**
|
|
3242
|
+
|
|
3243
|
+
```markdown
|
|
3244
|
+
You: "I have these performance budgets:
|
|
3245
|
+
- Initial load: 3 seconds on 3G
|
|
3246
|
+
- Time to interactive: 5 seconds
|
|
3247
|
+
- Bundle size: 200KB gzipped
|
|
3248
|
+
Build within these constraints."
|
|
3249
|
+
|
|
3250
|
+
```
|
|
3251
|
+
|
|
3252
|
+
### Meta-Learning Patterns
|
|
3253
|
+
|
|
3254
|
+
**The Pattern Recognition Pattern:**
|
|
3255
|
+
|
|
3256
|
+
```markdown
|
|
3257
|
+
You: "I've noticed I keep asking similar questions.
|
|
3258
|
+
Help me create a reusable prompt template for:
|
|
3259
|
+
'Adding CRUD operations for a new entity'
|
|
3260
|
+
Include all the things I usually forget to ask for."
|
|
3261
|
+
|
|
3262
|
+
Claude: [Creates reusable template]
|
|
3263
|
+
|
|
3264
|
+
```
|
|
3265
|
+
|
|
3266
|
+
**The Learning Loop Pattern:**
|
|
3267
|
+
|
|
3268
|
+
```markdown
|
|
3269
|
+
You: "After each feature, help me reflect:
|
|
3270
|
+
1. What went well?
|
|
3271
|
+
2. What was harder than expected?
|
|
3272
|
+
3. What would I do differently?
|
|
3273
|
+
4. What pattern should I remember?
|
|
3274
|
+
Then update my personal vibe-coding playbook."
|
|
3275
|
+
|
|
3276
|
+
```
|
|
3277
|
+
|
|
3278
|
+
## Conclusion: Your Vibe Coding Journey
|
|
3279
|
+
|
|
3280
|
+
### The Evolution of a Vibe Coder
|
|
3281
|
+
|
|
3282
|
+
**Month 1-2: Survival Mode**
|
|
3283
|
+
|
|
3284
|
+
- Everything is Speed Mode
|
|
3285
|
+
- Copy-pasting Claude's code
|
|
3286
|
+
- Hoping things work
|
|
3287
|
+
- Lots of Recovery Mode
|
|
3288
|
+
|
|
3289
|
+
**Month 3-4: Pattern Recognition**
|
|
3290
|
+
|
|
3291
|
+
- Discovering Discovery Mode
|
|
3292
|
+
- Recognizing when to switch modes
|
|
3293
|
+
- Building prompt templates
|
|
3294
|
+
- Less panic, more process
|
|
3295
|
+
|
|
3296
|
+
**Month 5-6: Confidence Building**
|
|
3297
|
+
|
|
3298
|
+
- Comfortable with mode switching
|
|
3299
|
+
- Challenging Claude's suggestions
|
|
3300
|
+
- Understanding trade-offs
|
|
3301
|
+
- Building real products
|
|
3302
|
+
|
|
3303
|
+
**Month 7-12: Mastery Development**
|
|
3304
|
+
|
|
3305
|
+
- Intuitive mode selection
|
|
3306
|
+
- Advanced prompting patterns
|
|
3307
|
+
- Team collaboration
|
|
3308
|
+
- Production confidence
|
|
3309
|
+
|
|
3310
|
+
**Year 2+: Wisdom Phase**
|
|
3311
|
+
|
|
3312
|
+
- Teaching others
|
|
3313
|
+
- Contributing patterns
|
|
3314
|
+
- Building complex systems
|
|
3315
|
+
- Pushing boundaries
|
|
3316
|
+
|
|
3317
|
+
### Your Personal Operating System
|
|
3318
|
+
|
|
3319
|
+
This guide isn't prescriptive - it's a toolkit. Your operating system will be unique based on:
|
|
3320
|
+
|
|
3321
|
+
- Your project types
|
|
3322
|
+
- Your risk tolerance
|
|
3323
|
+
- Your learning style
|
|
3324
|
+
- Your team dynamics
|
|
3325
|
+
|
|
3326
|
+
Take what works, modify what doesn't, and contribute your patterns back to the community.
|
|
3327
|
+
|
|
3328
|
+
### Final Principles
|
|
3329
|
+
|
|
3330
|
+
1. **Start with Speed, graduate to Production**
|
|
3331
|
+
Don't over-engineer from day one, but know when to level up.
|
|
3332
|
+
2. **Discovery is never wasted**
|
|
3333
|
+
Time spent understanding saves time spent fixing.
|
|
3334
|
+
3. **Recovery is learning**
|
|
3335
|
+
Every bug teaches you something. Document it.
|
|
3336
|
+
4. **Context is everything**
|
|
3337
|
+
The better you communicate with Claude, the better the results.
|
|
3338
|
+
5. **Modes are fluid**
|
|
3339
|
+
You might switch modes multiple times in one session. That's normal.
|
|
3340
|
+
6. **Trust but verify**
|
|
3341
|
+
Claude is brilliant but not infallible. Always understand what you're building.
|
|
3342
|
+
|
|
3343
|
+
### The Meta-Pattern
|
|
3344
|
+
|
|
3345
|
+
The ultimate pattern is that there is no ultimate pattern. Vibe coding is about:
|
|
3346
|
+
|
|
3347
|
+
- Rapid iteration
|
|
3348
|
+
- Continuous learning
|
|
3349
|
+
- Pragmatic decisions
|
|
3350
|
+
- Building momentum
|
|
3351
|
+
- Shipping products
|
|
3352
|
+
|
|
3353
|
+
You're not just learning to code - you're learning to think about problems systematically, communicate technical concepts clearly, and build software that matters.
|
|
3354
|
+
|
|
3355
|
+
Welcome to the vibe coding revolution. Now go build something amazing.
|
|
3356
|
+
|
|
3357
|
+
---
|
|
3358
|
+
|
|
3359
|
+
## Appendix: Quick Reference
|
|
3360
|
+
|
|
3361
|
+
### Mode Selection Cheat Sheet
|
|
3362
|
+
|
|
3363
|
+
```
|
|
3364
|
+
CLARITY: Low + RISK: Low → Discovery Mode
|
|
3365
|
+
CLARITY: High + RISK: Low → Speed Mode
|
|
3366
|
+
CLARITY: High + RISK: High → Production Mode
|
|
3367
|
+
CLARITY: Low + RISK: High → Discovery → Production
|
|
3368
|
+
BROKEN: Any → Recovery Mode
|
|
3369
|
+
|
|
3370
|
+
```
|
|
3371
|
+
|
|
3372
|
+
### Common Prompt Starters
|
|
3373
|
+
|
|
3374
|
+
```
|
|
3375
|
+
Speed Mode: "Quickly build..."
|
|
3376
|
+
Discovery Mode: "Help me understand..."
|
|
3377
|
+
Production Mode: "Carefully implement..."
|
|
3378
|
+
Recovery Mode: "URGENT: Fix..."
|
|
3379
|
+
|
|
3380
|
+
```
|
|
3381
|
+
|
|
3382
|
+
### Emergency Commands
|
|
3383
|
+
|
|
3384
|
+
```
|
|
3385
|
+
"This is broken in production, help!"
|
|
3386
|
+
"How do I rollback this change?"
|
|
3387
|
+
"Users are seeing errors, what do I do?"
|
|
3388
|
+
"I deployed the wrong code, how do I fix?"
|
|
3389
|
+
|
|
3390
|
+
```
|
|
3391
|
+
|
|
3392
|
+
### Success Metrics
|
|
3393
|
+
|
|
3394
|
+
- Speed Mode: Shipping in hours, not days
|
|
3395
|
+
- Discovery Mode: Clear understanding achieved
|
|
3396
|
+
- Production Mode: No production incidents
|
|
3397
|
+
- Recovery Mode: Issue resolved, lessons learned
|
|
3398
|
+
|
|
3399
|
+
Remember: The best code is code that ships and helps users. Everything else is details.
|