React18-Commander
React18-Commander是一款code方向的AI技能，核心价值是Master orchestrator for React 16/17 → 18，可用于解决开发者在code领域的实际问题，帮助用户提升效率、自动化重复任务或优化工作流。
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
mkdir -p ./skills/react18-commander && curl -sfL https://raw.githubusercontent.com/github/awesome-copilot/main/skills/react18-commander/SKILL.md -o ./skills/react18-commander/SKILL.mdRun in terminal / PowerShell. Requires curl (Unix) or PowerShell 5+ (Windows).
Skill Content
# 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:
{
"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+.
Upgrade Apollo Client, Emotion, react-router to React 18 compatible versions.
Resolve ALL peer dependency conflicts.
Run npm ls - zero warnings allowed.
Return GO or NO-GO with evidence."**Gate:** GO returned + `react@18.3.1` confirmed + 0 peer errors.
Memory write: `{"phase":"class-surgery","depsComplete":true,"reactVersion":"18.3.1"}`
---
PHASE 3 - Class Component Surgery
#tool:agent react18-class-surgeon
"Read .github/react18-audit.md for the full class component hit list.
This is a class-heavy codebase - be thorough.
Migrate every instance of:
- componentWillMount → componentDidMount (or state → constructor)
- componentWillReceiveProps → getDerivedStateFromProps or componentDidUpdate
- componentWillUpdate → getSnapshotBeforeUpdate or componentDidUpdate
- Legacy Context (contextTypes/childContextTypes/getChildContext) → createContext
- String refs (this.refs.x) → React.createRef()
- findDOMNode → direct refs
- ReactDOM.render → createRoot (needed to enable auto-batching + React 18 features)
- ReactDOM.hydrate → hydrateRoot
After all changes, run the app to check for React deprecation warnings.
Return: files changed, pattern count zeroed."**Gate:** Zero deprecated patterns in source. Build succeeds.
Memory write: `{"phase":"batching","classSurgeryComplete":true}`
---
PHASE 4 - Automatic Batching Surgery
#tool:agent react18-batching-fixer
"Read .github/react18-audit.md for batching vulnerability patterns.
React 18 batches ALL state 🎯 Best For
- QA engineers
- Developers writing unit tests
- Claude users
- GitHub Copilot users
- Software engineers
💡 Use Cases
- Generating test cases for edge conditions
- Writing integration test suites
- React component optimization
- Hook dependency audits
📖 How to Use This Skill
- 1
Install the Skill
Copy the install command from the Terminal tab and run it. The SKILL.md file downloads to your local skills directory.
- 2
Load into Your AI Assistant
Open Claude or GitHub Copilot and reference the skill. Paste the SKILL.md content or use the system prompt tab.
- 3
Apply React18-Commander to Your Work
Open your project in the AI assistant and ask it to apply the skill. Start with a small module to verify the output quality.
- 4
Review and Refine
Review AI suggestions before committing. Run tests, check for regressions, and iterate on the skill output.
❓ Frequently Asked Questions
Does this generate test mocks?
Many testing skills include mock generation. Check the install command and skill content for details.
Is React18-Commander compatible with Cursor and VS Code?
Yes — this skill works with any AI coding assistant including Cursor, VS Code with Copilot, and JetBrains IDEs.
Do I need specific dependencies for React18-Commander?
Check the install command and Works With section. Most code skills only require the AI assistant and your codebase.
How do I install React18-Commander?
Copy the install command from the Terminal tab and run it. The skill downloads to ./skills/react18-commander/SKILL.md, ready to use.
Can I customize this skill for my team?
Absolutely. Edit the SKILL.md file to add team-specific instructions, examples, or workflows.
⚠️ Common Mistakes to Avoid
Not testing edge cases
AI tends to generate happy-path tests. Manually review for boundary conditions.
Skipping validation
Always test AI-generated code changes, even for simple refactors.
Missing dependency updates
Check if the skill requires updated dependencies or new packages.