🚀 VibeCode4Noobs

💻 What is Claude Code?

Claude Code is an AI tool by Anthropic that can read your files, write code, run commands, and help you build entire projects through natural conversation. It comes in two flavors:

• Desktop App — A graphical application you download and install. Great for beginners.
• Terminal (CLI) — A command-line tool for those comfortable with the terminal. More flexible.

Both do the same thing — pick whichever feels more comfortable. You can always switch later.

📦 Prerequisites

• A computer running macOS, Windows, or Linux
• A Claude Pro or Max subscription (or an Anthropic API key)
• For the terminal method only: Node.js 18+ (download here)

🧠 What is CLAUDE.md?

A CLAUDE.md file in your project root tells Claude Code how to behave. Think of it as a set of instructions that makes Claude smarter, more consistent, and aligned with your workflow. It's the difference between a good AI assistant and a great one.

🎯 Why It Matters

• Consistency — Claude follows the same patterns every time
• Quality — Enforces best practices and prevents lazy fixes
• Self-improvement — Claude learns from corrections and gets better
• Verification — Claude proves things work before marking them done

📖 The Key Sections (click to expand)

📋 Starter CLAUDE.md Template

Copy this into a file called CLAUDE.md in your project root:

# Workflow Orchestration

### 1. Plan Mode Default
- Enter plan mode for ANY non-trivial task (3+ steps or architectural decisions)
- If something goes sideways, STOP and re-plan immediately — don't keep pushing
- Use plan mode for verification steps, not just building
- Write detailed specs upfront to reduce ambiguity

### 2. Subagent Strategy
- Use subagents liberally to keep main context window clean
- Offload research, exploration, and parallel analysis to subagents
- For complex problems, throw more compute at it via subagents
- One task per subagent for focused execution

### 3. Self-Improvement Loop
- After ANY correction from the user: update `tasks/lessons.md` with the pattern
- Write rules for yourself that prevent the same mistake
- Ruthlessly iterate on these lessons until mistake rate drops
- Review lessons at session start for relevant project

### 4. Verification Before Done
- Never mark a task complete without proving it works
- Diff behavior between main and your changes when relevant
- Ask yourself: "Would a staff engineer approve this?"
- Run tests, check logs, demonstrate correctness

### 5. Demand Elegance (Balanced)
- For non-trivial changes: pause and ask "is there a more elegant way?"
- If a fix feels hacky: "Knowing everything I know now, implement the elegant solution"
- Skip this for simple, obvious fixes — don't over-engineer
- Challenge your own work before presenting it

### 6. Autonomous Bug Fixing
- When given a bug report: just fix it. Don't ask for hand-holding
- Point at logs, errors, failing tests — then resolve them
- Zero context switching required from the user
- Go fix failing CI tests without being told how

# Task Management

1. **Plan First**: Write plan to `tasks/todo.md` with checkable items
2. **Verify Plan**: Check in before starting implementation
3. **Track Progress**: Mark items complete as you go
4. **Explain Changes**: High-level summary at each step
5. **Document Results**: Add review section to `tasks/todo.md`
6. **Capture Lessons**: Update `tasks/lessons.md` after corrections

# Core Principles

- **Simplicity First**: Make every change as simple as possible. Impact minimal code.
- **No Laziness**: Find root causes. No temporary fixes. Senior developer standards.
- **Minimal Impact**: Changes should only touch what's necessary. Avoid introducing bugs.

🌐 Why GitHub?

GitHub stores your code in the cloud, tracks every change you make, and connects to services like Cloudflare for automatic deployments. It's the backbone of modern development.

📝 Create Your Account

1. Go to github.com and sign up
2. Choose the free plan (it's all you need)
3. Verify your email address

📁 Create Your First Repository

1. Click the + button in the top right, then "New repository"
2. Name it something like my-first-vibe-site
3. Check "Add a README file"
4. Click "Create repository"

🔗 Clone It Locally

Copy your repo URL and clone it to your machine:

git clone https://github.com/YOUR-USERNAME/my-first-vibe-site.git
cd my-first-vibe-site

🔄 Essential Git Commands

These are the commands you'll use daily:

# Check what changed
git status

# Stage all changes
git add .

# Commit with a message
git commit -m "describe what you changed"

# Push to GitHub
git push

🎯 The Complete Pipeline

Here's what your complete workflow looks like now:

💬 Tips for Effective Prompting

• Be specific — "Add a blue nav bar with logo on left and 3 links on right" beats "add navigation"
• Describe the vibe — "Make it feel warm and cozy, like a cabin in the woods" works great
• Iterate — Start broad, then refine: "Make the hero bigger" or "Change the colors to earth tones"
• Let Claude commit — Say "commit and push" when you're happy with changes
• Reference examples — "Make it look similar to stripe.com's landing page style"

📚 Useful Resources

• Claude Code Documentation
• GitHub
• Cloudflare Pages