How This Was Built

Vibe Voyager was built entirely with Claude Code (Opus 4.6) using subagent-driven development. Every line of code, every component, every game mechanic was written by AI agents orchestrated from a single terminal. No copy-pasting from tutorials, no manual scaffolding — just a human director and a fleet of specialized agents working in parallel.

What you are reading right now is a meta case study: a game about vibe coding that was itself vibe-coded. The build process followed a structured pipeline of brainstorming, planning, parallel execution, and review — the exact workflow taught throughout the game's missions. This section documents how it all came together.

The technology choices were driven by two constraints: agents need to parallelize well, and the game runs entirely client-side with no backend. React components are naturally isolated by file, making them ideal for parallel agent work — each agent writes to its own component file with zero merge conflicts.

The entire game was built in a single ~66-minute coding session on the night of March 7-8, 2026. Brainstorming and planning happened earlier that day — exploring the design space, researching the AI tools landscape, writing a detailed design document, and creating a 9-phase implementation plan with 39 discrete tasks. At 11:58 PM, the first commit landed. By 1:00 AM, 14,400+ lines of production TypeScript were written, committed, and type-checked. Polish followed the next morning.

The implementation plan decomposed the entire project into 8 build phases plus deployment. Each phase was designed so that its tasks could run in parallel — multiple agents writing to different files simultaneously, with the main thread handling git commits after each wave completed. The timestamps below come directly from the git log.

Subagent-driven development is a workflow where a main orchestrator (the human + Claude Code session) decomposes work into independent tasks, then launches fresh agent instances to execute each task in parallel. The key principle: each agent gets a clean context window, a focused task description, and a set of files it is allowed to touch. No two agents ever edit the same file.

The main thread follows a strict protocol: (1) read the plan and identify the next wave of independent tasks, (2) launch agents with clear task boundaries, (3) wait for all agents to complete, (4) review the output, (5) commit each agent's work as a separate git commit, (6) move to the next wave. This mirrors how a tech lead coordinates a team of developers.

A critical discovery during the build: subagents cannot run bash commands or git operations. The main thread must handle all commits, type-checking, and integration verification. This constraint actually improved code quality — every commit was reviewed by the orchestrator before being accepted.

Claude Code was extended with skills and plugins that structured the development workflow. Each tool served a specific purpose in the pipeline from idea to deployed code.

Several architectural decisions shaped the build. Each was made deliberately to optimize for agent-based development:

Next.js over a game engine: React components map naturally to independent agent tasks. Each component is a single file with typed props — agents can write them in isolation without needing to understand the entire codebase. A game engine would have required shared state and scene graphs that are much harder to parallelize.

localStorage over a backend: The game is a teaching tool, not a social platform. There is no need for user accounts, leaderboards, or cloud saves. Removing the backend eliminated an entire category of infrastructure work and kept the project deployable on Vercel's free tier with zero ongoing costs.

Tailwind v4 over v3: The CSS-first configuration model (@theme directive, @import "tailwindcss") eliminates the tailwind.config.ts file entirely. Design tokens live in CSS where they belong, and agents can reference them without needing to read a separate config file.

The zero-conflict metric is the most significant. By carefully decomposing tasks so that each agent writes to its own set of files, the entire build avoided the merge conflicts that typically slow down parallel development. This required upfront planning — the implementation plan explicitly listed which files each agent would create or modify.

Vibe Voyager demonstrates that agentic development is not a theoretical concept — it is a practical methodology that produced 14,400 lines of production TypeScript in 66 minutes. The human role shifts from writing every line to directing the architecture, decomposing work, and reviewing output. The agents handle the volume; the human handles the vision. Post-build analysis showed the session could be optimized to ~35 minutes by merging independent phases into larger waves and eliminating orchestration gaps.