Workflow & Git
Git Essentials
Why Git Matters MORE for Vibe Coders
When AI generates code, it changes many files at once. Without Git, a single bad AI response can destroy hours of work with no way to recover. Git is your parachute.
- Manual coding changes one file at a time. AI changes come in batches of 5-20 files.
- When batch changes break something, you can't tell which file caused it without Git's diff.
- Every vibe coder who lost work shares the same regret: "I should have committed first."
The Commit-Before-Every-AI-Change Rule
Before asking AI to make ANY significant change, run this command.
# Create a checkpoint before every AI session
git add . && git commit -m "working version before AI changes"
These five commands handle 90% of your git needs as a vibe coder:
# 1. Check what changed
git status
# 2. Stage all changes
git add .
# 3. Save a checkpoint
git commit -m "describe what works"
# 4. Undo everything since last commit
git checkout .
Commit every 10-15 minutes when actively coding with AI. Each commit is a save point you can return to instantly.
Branch-Based Experimentation
The safest pattern for trying risky AI changes.
Create an experiment branch:
git checkout -b experiment/new-featureLet AI make changes freely on this branch.
If it works:
git checkout main && git merge experiment/new-featureIf it's a disaster:
git checkout main && git branch -D experiment/new-featureYour main branch stays completely untouched. This is how professional developers protect production code from experimental changes.
Git is Your Undo Button
- Commit before EVERY AI prompt.
- If AI breaks it,
git checkout .to reset. - Treat commits as video game save points.
- Use descriptive messages:
feat: add user signup,fix: prevent double charge.
# Commit Conventions
feat: add new feature
fix: fix a bug
refactor: restructure code
test: add or fix tests
chore: dependency updates
How to Undo AI Damage
Five commands ranked from gentle to nuclear.
# See every line AI added or removed
git diff
# Revert a single file to its last commit
git checkout -- filename.tsx
# Save changes temporarily, restore later
git stash
# Undo the last commit safely (keeps history)
git revert HEAD
# Nuclear option: destroy ALL uncommitted changes
git reset --hard HEAD
Git Disaster Recovery
Every git mess has a fix. Copy these commands.
# Undo last commit (keep changes)
git reset --soft HEAD~1
# Discard all uncommitted changes
git checkout .
# Recover deleted branch
git reflog
git checkout -b recovered SHA
# Merge conflict resolution
git merge --abort
# Then re-attempt with smaller changes
# Remove file from all git history
bfg --delete-files .env
git reflog expire --expire=now --all
git gc --prune=now --aggressive
# Detached HEAD fix
git checkout main
# Or save work first:
git checkout -b save-my-work
Git Stash Safety Net
Temporarily save work before risky AI operations.
When you code manually, you change one thing at a time. AI changes come in batches. You ask for a feature, AI generates 10 files. When those changes break something, you can't tell which change caused it.
# Save current work to the stash
git stash
# Your working directory is now clean
# Bring stashed work back
git stash pop
# Everything is restored
# See what is in the stash
git stash list
# Apply stash but keep it saved
git stash apply
Use case: You have half-finished work and AI suggests a completely different approach. Stash your work, try the AI approach, and if it fails, pop the stash to get back exactly where you were.
Debugging
Debugging Patterns That Work vs. Waste Credits
Effective Approaches
- Start a new chat session after 15-20 messages. Context pollution degrades AI reasoning over time.
- Commit or checkpoint before every AI session so you can revert instantly.
- Screenshot visual bugs and paste into chat. Vision models diagnose CSS issues better than text descriptions.
- Switch models when stuck. Try Claude when GPT fails, or vice versa. Different models have different blind spots.
- Use the "reflect first" prompt: "List 5-7 possible sources of this problem. Pick the 1-2 most likely. Add logs to validate before implementing a fix."
Credit-Burning Anti-Patterns
- The copy-paste loop: Blindly pasting error messages back to AI. Works for simple issues but spirals on architectural problems.
- The debugging death spiral: AI attempts a fix, creates a new bug, fixes that, creates another. Users report burning 500,000+ tokens in 30 minutes with zero progress.
- Trying to fix everything at once. Isolate a single issue before asking AI for help.
- Not breaking complex features into small chunks. Keep each AI task to a 15-minute scope.
Browser DevTools: Minimum Viable Knowledge
Open with F12 or Ctrl+Shift+I (Cmd+Option+I on Mac). Four tabs you need to know.
Console (Most Important)
Red text = errors (priority). Copy the red error message exactly, including file name and line number, and paste into your AI tool. Yellow = warnings (less urgent). White = informational (usually ignorable).
Network
Filter by "Fetch/XHR" to see only API calls. Red rows = failed requests. Click to see details. Status codes: 200 = OK, 400 = bad request, 401/403 = permission denied, 404 = not found, 500 = server error.
Elements
Hover elements to see boundaries highlighted. Click to see CSS styles. Toggle properties on/off to test changes live. Changes are temporary and disappear on reload.
Application
Check Local Storage, Session Storage, and Cookies. Verify environment variables are not exposed here. If you see API keys or secrets in this tab, your app has a critical vulnerability.
Error Message Dictionary for Vibe Coders
The most common errors you'll encounter and what they actually mean.
Access to fetch has been blocked by CORS policy
Your web app is trying to talk to a server that hasn't given it permission. You can't fix this from the frontend alone. The API server needs CORS headers. For Supabase or Firebase, check allowed origins in the dashboard.
Cannot read properties of undefined/null
Your code is trying to access data that doesn't exist yet. Usually happens when API data hasn't loaded. Fix with optional chaining: user?.name instead of user.name.
Unauthorized / Forbidden
401: You are not authenticated (not logged in). 403: You are authenticated but lack permission. Check that auth tokens are present and not expired, and that Supabase RLS policies allow access.
Not Found
The URL or API endpoint doesn't exist. Check for typos in the URL, verify the API route exists, and confirm the server is running.
Internal Server Error
Something crashed on the server. It's not the frontend's fault. Check server logs in Supabase, Vercel function logs, or Railway logs.
Hydration Mismatch (Next.js/React)
The server built one version of the page but the browser built a different version. Usually caused by browser-only code (window, localStorage) running during server rendering. Wrap browser-specific code in useEffect.
process.env.NEXT_PUBLIC_XXX is not defined
Environment variables are not set. In Next.js, client-side env vars must start with NEXT_PUBLIC_. They must be added in the Vercel/Netlify dashboard separately. After adding them, you must redeploy.
Module not found: Can't resolve 'xxx'
A required package isn't installed. Run npm install [package-name]. Extremely common with Bolt.new, which frequently omits packages from package.json. Also check for typos in import paths (they're case-sensitive).
Platform-Specific Debugging Tips
Supabase RLS Debugging
Row Level Security is disabled by default on new tables, and in analyses of exposed vibe-coded apps it is the dominant cause of Supabase data leaks.
# Quick test: does your table have RLS enabled?
SELECT tablename, rowsecurity FROM pg_tables
WHERE schemaname = 'public';
WITH CHECK clause.service_role and bypasses all RLS. Always test from the client SDK.service_role key should never be used in client-side code. Only the anon key belongs in the browser. Multiple policies on the same table combine with OR logic, meaning each additional policy expands access rather than restricting it.Screenshot Debugging with Vision Models
A picture is worth a thousand words to AI. When you want AI to fix a visual bug, include a screenshot so AI can see what you see. Vision-capable models (Claude, GPT-4o) diagnose CSS and layout issues far better from screenshots than from text descriptions.
Take a screenshot of the broken UI. Crop to show the problem area.
Paste the screenshot directly into your AI chat (Cursor, Claude, ChatGPT).
Describe what is wrong and what it should look like. AI returns specific code fixes.
Tools that formalize this: screenshot-to-code (open source, converts screenshots to HTML/Tailwind/React), MCP screenshot servers for automated visual regression testing, and Windsurf's drag-and-drop screenshot feature.
"Rubber Duck" AI Debugging Template
When you're stuck on a bug, paste this structured template into your AI tool instead of just describing the problem vaguely.
Structured Bug Report for AI:
Goal: What I'm trying to accomplish
Code: [paste the relevant function/component]
Expected: What should happen
Actual: What actually happens
Error: [paste full error message if any]
Already tried: List what you have attempted
Environment: Framework version, Node version, OS
This structured format gives the AI all the context it needs on the first try, avoiding back-and-forth questions that waste your time and tokens.
Code Quality
Code Review Checklist (For Non-Technical Builders)
You don't need to understand every line. Use this 5-point check on every AI-generated change.
The "Log Everything" Mindset
Experienced developers log BEFORE and AFTER critical operations. This is the difference between debugging in minutes vs. hours.
Silent Failure (Bad)
async function chargeUser(userId) {
const user = await getUser(userId);
await stripe.charges.create(...);
await updateSubscription(userId);
};
// If this fails, you have NO idea where
Observable (Good)
async function chargeUser(userId) {
console.log("Charging user:", userId);
try {
const user = await getUser(userId);
console.log("User found:", user.email);
const charge = await stripe.charges.create(...);
console.log("Charge created:", charge.id);
await updateSubscription(userId);
console.log("Subscription updated");
} catch (err) {
console.error("Charge failed:", userId, err);
throw err;
}
};
When AI is Confidently Wrong
A Purdue University study (2024, testing GPT-3.5) found ChatGPT's code was wrong 52% of the time. AI invents API methods, fabricates library features, and presents hallucinations as fact with complete confidence.
Red flags to watch for:
- The same fix suggested 3+ times in a row without resolving the issue.
- AI claims "Fixed!" or "This should work now" without actually running tests.
- An API method you've never seen after months of using a library. Verify it exists in the official docs.
- AI contradicts instructions it followed correctly in a previous message.
- Specific version claims like "This was added in version 3.2" without you verifying.
Verification protocol: Run code immediately. Use a second AI model to review the first model's output. Check official documentation for any API or method you don't recognize.
Common Traps
The "One More Framework" Trap
When you hit a wall with state management, routing, or data fetching, the temptation is to switch frameworks entirely. Don't do this. The problem is almost never the framework. Learn the tool you have before jumping to another one. Every framework has the same fundamental challenges. You're just trading familiar problems for unfamiliar ones.
The "Rewrite from Scratch" Trap
Gartner projects 30% of generative AI projects will be abandoned after proof of concept by end of 2025. The pattern: build with AI, hit complexity wall, want to rewrite everything. Don't rewrite. Instead: add tests to the existing code, fix the worst bugs first, then refactor incrementally. Joel Spolsky called rewrites "the single worst strategic mistake any software company can make."
Running Local Models for Free AI Coding
Use Ollama and DeepSeek for unlimited, private AI coding without credit costs.
# Install Ollama with one command
curl -fsSL https://ollama.com/install.sh | sh
# Run DeepSeek locally
ollama run deepseek-r1:7b
| Model Size | Min RAM | Quality |
|---|---|---|
| 1.5B | 4 GB | Basic tasks only |
| 7B | 8 GB | Adequate for simple generation |
| 14B | 16 GB | Approaching useful quality |
| 32B | 32 GB+ | Approaches o1-mini quality |
Benefits: Unlimited usage, complete privacy, offline capability, zero per-token fees. Limitation: Local models (7B-14B) are significantly less capable than Claude Sonnet or GPT-4o for complex tasks. Best used for simple code generation, autocomplete, and when you want to avoid burning cloud credits.
When to Vibe Code vs. Hire a Developer
Keep Vibe Coding When
- Building an MVP or prototype
- Personal projects and internal tools
- Simple CRUD apps
- Budget under $5,000
- Speed matters more than perfection
- You can describe the entire MVP in one paragraph
Hire a Developer When
- Complex architecture (multi-tenant SaaS)
- Security-critical applications
- Planning for 100,000+ users
- Complex third-party integrations
- Compliance requirements (HIPAA, SOC2)
- The app handles sensitive user data
Warning Signs You Have Hit the Inflection Point
- AI keeps breaking existing features when adding new ones.
- You spend more time debugging than building.
- Users report security issues or data exposure.
- Performance degrades noticeably as user count grows.
- Every bug fix creates a cascade of new bugs.