Level 8 Practice: Implement 3 Features in Parallel with Git Worktree

About This Tutorial

If you want to understand the concepts and mechanics first, see the Level 8 concept guide.

Git worktree lets you check out multiple branches of the same repository as separate directories simultaneously. This allows multiple Claude agents to work on independent branches in parallel without interfering with each other.

Who this is for: Anyone who has completed up to Level 7 and is comfortable with basic Git operations (branching, committing). Knowing the concept of shell script parallelism (& and wait) makes this easier to follow.

Estimated time: 15 min read + 50 min hands-on

Carrying Over from the Previous Level

Blog idea collection was automated in Level 7. I now want to add dark mode, a projects page, and an RSS feed to my-portfolio — but implementing them sequentially takes too long.

Step 1: Overview of the 3 Features

Feature	Branch	Implementation
Dark mode	`feature/darkmode`	Set `darkMode: 'class'` in `tailwind.config.ts` and add a toggle button to the header
Projects page	`feature/projects-page`	Fetch top repos by star count from the GitHub API and display them in `src/app/projects/page.tsx`
RSS feed	`feature/rss-feed`	Add a Route Handler at `src/app/rss.xml/route.ts` to serve blog posts in RSS 2.0 format

The three features have no dependencies on each other, so parallel implementation is possible.

Step 2: Create Branches with Git Worktree

Run the following from the root of my-portfolio. Each branch is checked out as a dedicated directory.

# Dark mode
git worktree add ../my-portfolio-darkmode -b feature/darkmode

# Projects page
git worktree add ../my-portfolio-projects -b feature/projects-page

# RSS feed
git worktree add ../my-portfolio-rss -b feature/rss-feed

Resulting directory structure:

~/
├── my-portfolio/                 # Main repo (main branch)
├── my-portfolio-darkmode/        # feature/darkmode branch
├── my-portfolio-projects/        # feature/projects-page branch
└── my-portfolio-rss/             # feature/rss-feed branch

Each directory shares the same Git objects — commits made in any worktree are reflected in the original repository.

Step 3: Create the Parallel Implementation Script

Create scripts/parallel_features.sh. It launches claude in three worktree directories with & for parallelism and uses wait to block until all three complete.

#!/usr/bin/env bash
# scripts/parallel_features.sh
# Implement 3 features in parallel using Git worktree

set -euo pipefail

REPO_ROOT=$(git rev-parse --show-toplevel)
PARENT_DIR=$(dirname "${REPO_ROOT}")
TIMESTAMP=$(date +%Y%m%d_%H%M%S)
LOG_DIR="${REPO_ROOT}/logs"
mkdir -p "${LOG_DIR}"

echo "=== Parallel Feature Implementation ==="
echo "Started: $(date)"
echo ""

# Agent prompts

DARKMODE_PROMPT="Implement dark mode for my-portfolio (Next.js 14 + TypeScript + Tailwind CSS).

Requirements:
1. Set darkMode to 'class' in tailwind.config.ts
2. Create src/components/ThemeToggle.tsx
   - Toggle clicks add/remove the 'dark' class on <html>
   - Persist the setting in localStorage so it survives page reloads
   - Use text icons '☀️ Light / 🌙 Dark' for the button
3. Add the toggle button to <header> in src/app/layout.tsx
4. Add dark: prefix styles to all existing components
   (e.g., dark:bg-gray-900 dark:text-white)

After finishing, run git add and git commit.
Commit message: 'feat: add dark mode toggle with localStorage persistence'"

PROJECTS_PROMPT="Implement a projects page for my-portfolio (Next.js 14 + TypeScript).

Requirements:
1. Create src/app/projects/page.tsx
2. Fetch from the GitHub REST API (https://api.github.com/users/{username}/repos)
   - Get the username from the NEXT_PUBLIC_GITHUB_USERNAME environment variable
   - Sort by star count descending and display the top 6
3. Create src/components/ProjectCard.tsx
   - Display repo name, description, star count, language, and GitHub link
   - Use Tailwind CSS for a card-style design
4. Add a '/projects' link to the navigation in src/app/layout.tsx
5. Add NEXT_PUBLIC_GITHUB_USERNAME=your-username to .env.local.example

After finishing, run git add and git commit.
Commit message: 'feat: add projects page with GitHub API integration'"

RSS_PROMPT="Implement an RSS feed for my-portfolio (Next.js 14 + TypeScript).

Requirements:
1. Create src/app/rss.xml/route.ts (Route Handler)
2. Read Markdown files from src/content/posts/ and return RSS 2.0 XML
   - Use gray-matter to get frontmatter (title, date, description)
   - Set Content-Type to 'application/xml'
3. RSS channel info:
   - title: 'my-portfolio blog'
   - link: process.env.NEXT_PUBLIC_SITE_URL (default: 'https://example.com')
   - description: 'Practical articles on TypeScript and Next.js'
4. Add <link rel='alternate' type='application/rss+xml'> to <head> in src/app/layout.tsx
5. If gray-matter is not installed, run npm install gray-matter

After finishing, run git add and git commit.
Commit message: 'feat: add RSS feed endpoint at /rss.xml'"

# Launch 3 agents in parallel
echo "Launching 3 agents in parallel..."

(
  cd "${PARENT_DIR}/my-portfolio-darkmode"
  echo "${DARKMODE_PROMPT}" | claude --print --dangerously-skip-permissions \
    > "${LOG_DIR}/darkmode_${TIMESTAMP}.log" 2>&1
  echo "Dark mode: done"
) &
PID_DARKMODE=$!

(
  cd "${PARENT_DIR}/my-portfolio-projects"
  echo "${PROJECTS_PROMPT}" | claude --print --dangerously-skip-permissions \
    > "${LOG_DIR}/projects_${TIMESTAMP}.log" 2>&1
  echo "Projects page: done"
) &
PID_PROJECTS=$!

(
  cd "${PARENT_DIR}/my-portfolio-rss"
  echo "${RSS_PROMPT}" | claude --print --dangerously-skip-permissions \
    > "${LOG_DIR}/rss_${TIMESTAMP}.log" 2>&1
  echo "RSS feed: done"
) &
PID_RSS=$!

# Wait for all agents to finish
echo "Implementing... (this may take a few minutes)"
wait $PID_DARKMODE $PID_PROJECTS $PID_RSS

echo ""
echo "=== All agents complete ==="
echo "Finished: $(date)"
echo ""
echo "Log files:"
echo "  - ${LOG_DIR}/darkmode_${TIMESTAMP}.log"
echo "  - ${LOG_DIR}/projects_${TIMESTAMP}.log"
echo "  - ${LOG_DIR}/rss_${TIMESTAMP}.log"

Grant execute permission:

chmod +x scripts/parallel_features.sh

Step 4: Run the Script

./scripts/parallel_features.sh

While running, three agents work in parallel. Monitor progress through each log file:

# Real-time monitoring in a separate terminal
tail -f logs/darkmode_*.log

Step 5: Verify Each Branch

After all agents complete, check the results in each worktree:

# Check dark mode
cd ../my-portfolio-darkmode
git log --oneline -3
ls src/components/ThemeToggle.tsx

# Check projects page
cd ../my-portfolio-projects
git log --oneline -3
ls src/app/projects/page.tsx

# Check RSS feed
cd ../my-portfolio-rss
git log --oneline -3
ls src/app/rss.xml/route.ts

Step 6: Run Parallel Reviews

Review the three branches sequentially with scripts/review_pr.sh:

cd ~/my-portfolio

for BRANCH in feature/darkmode feature/projects-page feature/rss-feed; do
  echo ""
  echo "=============================="
  echo "Reviewing: ${BRANCH}"
  echo "=============================="

  # Review the branch diff temporarily
  (
    cd "../my-portfolio-${BRANCH#feature/}"
    git diff main...HEAD -- 'src/**/*.tsx' 'src/**/*.ts' | \
    claude --print --dangerously-skip-permissions \
      -p "Review the following diff for TypeScript type safety, React best practices, and accessibility."
  )
done

Step 7: Push Each Branch

If the review results look good, push each branch to the remote:

cd ../my-portfolio-darkmode
git push origin feature/darkmode

cd ../my-portfolio-projects
git push origin feature/projects-page

cd ../my-portfolio-rss
git push origin feature/rss-feed

Step 8: Clean Up Worktrees

After each branch has been merged into main, remove the worktrees:

cd ~/my-portfolio

git worktree remove ../my-portfolio-darkmode
git worktree remove ../my-portfolio-projects
git worktree remove ../my-portfolio-rss

# Confirm only main remains
git worktree list

Using Claude as the Orchestrator

Instead of writing the script yourself, you can hand the entire coordination to Claude:

> Implement the following 3 features in parallel for my-portfolio.

1. Dark mode (Tailwind class mode + localStorage)
2. Projects page (GitHub API + top 6 repos)
3. RSS feed (/rss.xml Route Handler)

Use Git worktree to create 3 branches — feature/darkmode, feature/projects-page, feature/rss-feed —
simultaneously launch Claude agents on each, implement in parallel, commit on each branch,
and report the review results at the end.

Claude autonomously handles everything from creating worktrees to running agents in parallel, reviewing, and reporting.

The my-portfolio at This Point

feature/darkmode, feature/projects-page, and feature/rss-feed are all complete
Each branch is pushed to the remote and ready for a PR
scripts/parallel_features.sh sets up the infrastructure to implement multiple features in parallel going forward

my-portfolio/
├── scripts/
│   ├── review_pr.sh
│   ├── collect_and_blog.sh
│   └── parallel_features.sh    # ← newly added
├── logs/
│   ├── darkmode_*.log
│   ├── projects_*.log
│   └── rss_*.log
└── ...

# Each worktree branch (remote)
feature/darkmode       → ThemeToggle.tsx, Tailwind dark mode config
feature/projects-page  → projects/page.tsx, ProjectCard.tsx
feature/rss-feed       → rss.xml/route.ts

Next Level

Level 9 Practice: Automate Weekly Article Generation and Vulnerability Monitoring 24/7