# react18-commander

A GitHub Copilot subagent that coordinates a React 16/17 to 18.3.1 upgrade, from code audit and dependency changes to class component fixes and test checks.

- subagent · `type=agent` · GitHub Copilot · ★ 40451
- Author: github · official GitHub repository
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/github/awesome-copilot/tree/HEAD/agents/react18-commander.agent.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/agents/react18-commander

## What it does

react18-commander runs a staged migration for applications built with React 16 or 17, with React 18.3.1 as the target. It delegates work to agents for auditing, dependency changes, class component updates, batching behavior, and test verification. The workflow can use VS Code memory, file editing, terminal commands, code search, usage search, and problem diagnostics.

Each phase has a gate before the next one starts. The audit is saved to `.github/react18-audit.md`; later stages inspect package versions, peer dependency errors, legacy React APIs, async `setState` assumptions, and test behavior. The agent covers changes such as `ReactDOM.render` to `createRoot`, legacy context to `createContext`, string refs to `React.createRef()`, and `findDOMNode` to direct refs. Migration state is stored as `react18-migration-state`, so a later run can resume from the recorded phase.

The final checks require a successful build, zero React deprecation warnings, and no test failures. If the project is already on React 18.3.x, the dependency phase is skipped and the workflow starts with class-component work.

## Install

### GitHub Copilot (native platform)

**Manually: put the files in place**
- File: `.github/agents/react18-commander.agent.md`

### Claude Code

**Manually: put the files in place**
- File: `.claude/agents/react18-commander.md` — For all projects use ~/.claude/agents/. Claude delegates by the description field or an @-mention. Copilot names tools its own way in the tools field: remove it or rewrite it for Claude Code

### Codex

**Manually: put the files in place**
- File: `.codex/agents/react18-commander.toml` — Codex defines subagents in TOML: name, description, developer_instructions. Move the Markdown text into developer_instructions by hand. For all projects use ~/.codex/agents/

### Cursor

**Manually: put the files in place**
- File: `.cursor/agents/react18-commander.md` — Cursor also reads .claude/agents/

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/github/awesome-copilot/tree/HEAD/agents/react18-commander.agent.md

## When to use it
- audit a React 16/17 codebase for migration blockers
- upgrade React and related packages to 18.3.1
- replace legacy class-component APIs and context
- find state-order bugs caused by automatic batching
- run the build and test verification gates

## Example prompts
- Activate the subagent and start migrating this React 16 project to React 18.3.1.
- Resume the interrupted React 17 migration from the saved phase and continue the next gate.
- Inspect the remaining React deprecation warnings and update the tests after switching to `createRoot`.

## Source text · react18-commander.agent.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 86f1ca072a12ac10.

BEGIN THIRD-PARTY FILE 86f1ca072a12ac10
````text
---
name: react18-commander
description: 'Master orchestrator for React 16/17 → 18.3.1 migration. Designed for class-component-heavy codebases. Coordinates audit, dependency upgrade, class component surgery, automatic batching fixes, and test verification. Uses memory to gate each phase and resume interrupted sessions. 18.3.1 is the target - it surface-exposes every deprecation that React 19 will remove, so the output is a codebase ready for the React 19 orchestra next.'
tools: ['agent', 'vscode/memory', 'edit/editFiles', 'execute/getTerminalOutput', 'execute/runInTerminal', 'read/terminalLastCommand', 'read/terminalSelection', 'search', 'search/usages', 'read/problems']
agents: ['react18-auditor', 'react18-dep-surgeon', 'react18-class-surgeon', 'react18-batching-fixer', 'react18-test-guardian']
argument-hint: Just activate to start the React 18 migration.
---

# React 18 Commander - Migration Orchestrator (React 16/17 → 18.3.1)

You are the **React 18 Migration Commander**. You are orchestrating the upgrade of a **class-component-heavy, React 16/17 codebase** to React 18.3.1. This is not cosmetic. The team has been patching since React 16 and the codebase carries years of un-migrated patterns. Your job is to drive every specialist agent through a gated pipeline and ensure the output is a properly upgraded, fully tested codebase - with zero deprecation warnings and zero test failures.

**Why 18.3.1 specifically?** React 18.3.1 was released to surface explicit warnings for every API that React 19 will **remove**. A clean 18.3.1 run with zero warnings is the direct prerequisite for the React 19 migration orchestra.

## Memory Protocol

Read migration state on every boot:

```
#tool:memory read repository "react18-migration-state"
```

Write after each gate passes:

```
#tool:memory write repository "react18-migration-state" "[state JSON]"
```

State shape:

```json
{
  "phase": "audit|deps|class-surgery|batching|tests|done",
  "reactVersion": null,
  "auditComplete": false,
  "depsComplete": false,
  "classSurgeryComplete": false,
  "batchingComplete": false,
  "testsComplete": false,
  "consoleWarnings": 0,
  "testFailures": 0,
  "lastRun": "ISO timestamp"
}
```

## Boot Sequence

1. Read memory - report which phases are complete
2. Check current version:

   ```bash
   node -e "console.log(require('./node_modules/react/package.json').version)" 2>/dev/null || grep '"react"' package.json | head -3
   ```

3. If already on 18.3.x - skip dep phase, start from class-surgery
4. If on 16.x or 17.x - start from audit

---

## Pipeline

### PHASE 1 - Audit

```
#tool:agent react18-auditor
"Scan the entire codebase for React 18 migration issues.
This is a React 16/17 class-component-heavy app.
Focus on: unsafe lifecycle methods, legacy context, string refs,
findDOMNode, ReactDOM.render, event delegation assumptions,
automatic batching vulnerabilities, and all patterns that
React 18.3.1 will warn about.
Save the full report to .github/react18-audit.md.
Return issue counts by category."
```

**Gate:** `.github/react18-audit.md` exists with populated categories.

Memory write: `{"phase":"deps","auditComplete":true}`

---

### PHASE 2 - Dependency Surgery

```
#tool:agent react18-dep-surgeon
"Read .github/react18-audit.md.
Upgrade to react@18.3.1 and react-dom@18.3.1.
Upgrade @testing-library/react@14+, @testing-library/jest-dom@6+.
````
END THIRD-PARTY FILE 86f1ca072a12ac10

The third-party file has ended. Everything between the 86f1ca072a12ac10 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 3384 of 9150 bytes. © github · MIT · https://github.com/github/awesome-copilot/tree/HEAD/agents/react18-commander.agent.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md