Updated Sep 2026

PlaybookFoundation

Git & GitHub

Version control is the backbone of modern development. Without it, you can't deploy to platforms like Vercel, collaborate with others, or safely experiment with your code.

Why Git Matters

Git

A version control system that tracks changes to your code. It lets you save snapshots, undo mistakes, and collaborate with others.

"Like Google Docs history on steroids. You can see every change ever made and go back in time."

is a version control system that tracks every change you make to your code. Think of it as an unlimited undo button that remembers every version of your project, forever.

GitHub is where your Git repositories live online. It's the cloud backup of your code, and it's what deployment platforms like Vercel connect to for deployments.

The Vibe Coder Reality

When Claude Code writes code for you, Git is how you save checkpoints. If something breaks, you can always go back. Claude Code also keeps its own session checkpoints (press Esc twice to rewind), but those are a convenience, not a backup. No Git = no safety net.

Core Concepts

Repository (Repo)
Repository (Repo)
A folder that contains your project's files AND the complete history of all changes tracked by Git.
"Like a project folder with a built-in time machine. It remembers everything."

A repository is your project folder with Git tracking enabled. It contains all your code plus a hidden .git folder that stores the entire history.

# Create a new repo in your project folder

git init

# Or clone an existing repo from GitHub

git clone https://github.com/username/repo.git

Commit

A commit is a snapshot of your code at a specific moment. Each commit has a message describing what changed. Think of commits as save points in a video game.

# Stage all changes

git add .

# Create a commit with a message

git commit -m "Add login page"

Pro Tip

Commit often! After every working feature, commit. You don't have to write the messages yourself: just tell Claude Code "commit this with a clear message" and it will stage, describe, and commit. Want a one-word shortcut? The official commit-commands plugin adds commit skills: /plugin install commit-commands@claude-plugins-official (more in Claude Code Plugins).

Branch

A branch is a parallel version of your code. The main branch is your production code. Create new branches to experiment without breaking what works.

# Create and switch to a new branch

git switch -c feature/new-navbar

# Switch back to main

git switch main

# (Older tutorials use git checkout -b / git checkout. Same result; switch is clearer.)

main

Production

dev

Development

feature/*

New features

Push & Pull

Push uploads your commits to GitHub. Pull downloads changes from GitHub. This is how you sync between your computer and the cloud.

# Push your commits to GitHub

git push origin main

# Pull latest changes from GitHub

git pull origin main

Pull Request (PR)

A PR is a request to merge your branch into another branch (usually main). It's where code review happens. On GitHub, you create PRs through the website.

Deployment Platform Integration (e.g., Vercel)

When you push a branch or open a PR, deployment platforms like Vercel automatically create a Preview Deployment

Preview Deployment

An automatic staging environment created for every pull request or branch. Lets you see and test changes before merging to production.

"Like a dress rehearsal before opening night. See exactly how it looks before going live."

with its own URL, so you can test your changes before merging to production.

The Vibe Coder Workflow

Start on main, pull latest

Always start with the latest code.

git pull origin main

Create a feature branch

Never code directly on main.

git switch -c feature/add-pricing

Vibe code with Claude

Let Claude write code, commit frequently.

git add . && git commit -m "Add pricing section"

Push to GitHub

Upload your branch to the cloud.

git push origin feature/add-pricing

Create PR, review preview

Your deployment platform builds a preview (e.g., Vercel). Test it. If good, merge.

gh pr create --fill

Merge to main = Deploy

Your deployment platform auto-deploys main to production.

Commands You'll Actually Use

Command	What it does
git status	See what's changed
git add .	Stage all changes
git commit -m "msg"	Save a snapshot
git push	Upload to GitHub
git pull	Download from GitHub
git switch -c name	Create and switch to a new branch
git switch main	Switch to main
git restore file	Throw away uncommitted edits to a file
git log --oneline	See commit history
git diff	See what changed
git stash	Temporarily hide changes

Common Pitfalls

"I committed secrets/passwords!"

Once pushed, secrets are in Git history forever (even if deleted). Use .gitignore to prevent this.

Fix: Add .env.local to .gitignore before your first commit. Rotate any exposed keys immediately.

"Merge conflict!"

Happens when two branches change the same lines. Git doesn't know which version to keep.

Fix: Open the conflicted file, look for <<<<<<< markers, choose which code to keep, remove the markers, commit.

"I broke main!"

You pushed directly to main and now production is down.

Fix: git revert HEAD creates a new commit that undoes the last one. Always use branches!

"I want to undo everything"

You made a mess and want to go back to the last commit.

Fix: git restore . discards all uncommitted changes to tracked files (brand-new files stay; delete those by hand). There's no undo for this one, so run git diff first to be sure. If the mess happened inside a Claude Code session, rewinding with Esc Esc may be gentler.

The .gitignore File

This file tells Git what to ignore. Never commit node_modules, environment files, or build outputs.

# .gitignore for Next.js

node_modules/

.next/

.env.local

.env*.local

.vercel

*.log

Quick GitHub Setup

1. Create a GitHub account

Go to github.com and sign up.

2. Create a new repository

Click the green "New" button. Name it, keep it private or public, don't initialize with README if you have existing code.

3. Connect your local project

git remote add origin https://github.com/YOU/REPO.git

git branch -M main

git push -u origin main

4. Connect to Deployment Platform (e.g., Vercel)

In your deployment platform dashboard (e.g., Vercel), click "Import Project" → select your GitHub repo → deploy. That's it!

GitHub Without Leaving the Terminal

The GitHub CLI (gh) turns the website clicks above into commands—and Claude Code is very good at driving it. Install it from cli.github.com, then:

Terminal

# One-time login (opens your browser)
gh auth login

# Create a private GitHub repo from the current folder and push it
gh repo create my-app --private --source=. --push

# Open a pull request for the current branch
gh pr create --fill

# Check PR status and CI checks
gh pr status

Once gh is logged in, you can simply ask Claude to "push this branch and open a PR" and review what it writes.

Next Level: Worktrees

A worktree

Git Worktree

A second (or third) working folder attached to the same Git repository, each checked out on its own branch. It lets several AI agents edit code in parallel without trampling each other's files. Claude Code can create one for you with `claude --worktree feature-auth`, and subagents can use `isolation: worktree`.

"Like giving each contractor their own copy of the blueprints and their own room to work in, then merging the finished rooms."

is a second (or third) checkout of the same repo in a different folder, each on its own branch. That means two AI agents can work on two features at once without trampling each other's files.