System Architecture

The toolkit organizes AI capabilities into a layered system where each piece has a clear purpose.

You

Primary Agents

@planner@builder@toolkit

Sub-Agents (Specialists)

react-devgo-devfrontend-criticsecurity-critictester...
powered by

Skills

On-demand workflows loaded when needed (migrations, PRDs, screenshots...)

Project Context

project.json, CONVENTIONS.md, PRDs that guide agent behavior

How It All Works Together

You're always in control. The three primary agents—@planner, @builder, and @toolkit—are orchestrators that understand your requests and delegate work to specialized sub-agents. You choose which agent to invoke, review outputs, and approve changes.

Planner helps you turn ideas into structured PRDs with user stories. Builder executes those PRDs by delegating to domain-specific sub-agents—a React developer for components, a security critic for vulnerability checks, a tester for test coverage. Toolkit maintains and evolves the agent system itself.

When agents encounter complex, multi-step workflows, they load skills. A skill is a detailed instruction set—like a recipe—that guides the agent through tasks that benefit from explicit structure: database migrations, screenshot capture, merge conflict resolution.

All of this is informed by your project context. The project.json file tells agents about your tech stack, coding conventions, and active PRDs. This ensures agents produce code that fits your codebase—not generic boilerplate.

Working with the Primary Agents

These three agents are your entry points to the system. Each has a distinct role—Planner helps you think, Builder helps you ship, Toolkit helps you improve.

Planner

Turn ideas into implementation-ready PRDs

  • • Creates and refines PRDs with user stories
  • • Asks clarifying questions to tighten scope
  • • Defines acceptance criteria
  • • Never writes code—planning only

How you use it:

@planner I want to add [feature]...
Learn more

Builder

Execute PRDs and handle ad-hoc tasks

  • • Implements user stories from PRDs
  • • Delegates to specialist sub-agents
  • • Runs quality gates and commits code
  • • Handles quick fixes without PRDs

How you use it:

@builder Implement the PRD or @builder Fix the login bug
Learn more

Toolkit

Evolve the agent system itself

  • • Processes pending updates from agents
  • • Creates and modifies agents, skills, scaffolds
  • • Maintains toolkit-wide consistency
  • • Used less frequently than Planner/Builder

How you use it:

@toolkit Review pending updates
Learn more

How They Work Together

  1. 1
    Plan — Start with @planner to create a PRD with user stories
  2. 2
    Build — Hand the ready PRD to @builder for implementation
  3. 3
    Improve — Agents discover gaps and queue updates for @toolkit
  4. 4
    Repeat — Better agents lead to better planning and building

This is the Agent Loop. Each phase has clear ownership between you and the agents.

See the full Agent Loop →

Which Agent Should I Use?

ScenarioAgentWhy
New multi-story featurePlannerNeeds requirements before code
Quick bug fixBuilderScope is clear, just implement
Implement a ready PRDBuilderPlanning done, time to ship
Refine unclear requirementsPlannerNeed to explore before building
Improve an agent's behaviorToolkitMeta-level toolkit change

For detailed decision trees, see the Human in the Loop guide.

Explore Each Concept

Dive deeper into how each piece of the system works.