Master React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation.
Use this skill when
Upgrading React applications to latest versions
Migrating class components to functional components with hooks
Adopting concurrent React features (Suspense, transitions)
Applying codemods for automated refactoring
Modernizing state management patterns
Updating to TypeScript
Improving performance with React 18+ features
Do not use this skill when
The task is unrelated to react modernization
You need a different domain or tool outside this scope
Instructions
Clarify goals, constraints, and required inputs.
Apply relevant best practices and validate outcomes.
Provide actionable steps and verification.
If detailed examples are required, open resources/implementation-playbook.md.
Resources
resources/implementation-playbook.md for detailed patterns and examples.
1---2name: react-modernization3description: React Modernization4---5# React Modernization67Master React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation.89## Use this skill when1011- Upgrading React applications to latest versions12- Migrating class components to functional components with hooks13- Adopting concurrent React features (Suspense, transitions)14- Applying codemods for automated refactoring15- Modernizing state management patterns16- Updating to TypeScript17- Improving performance with React 18+ features1819## Do not use this skill when2021- The task is unrelated to react modernization22- You need a different domain or tool outside this scope2324## Instructions2526- Clarify goals, constraints, and required inputs.27- Apply relevant best practices and validate outcomes.28- Provide actionable steps and verification.29- If detailed examples are required, open `resources/implementation-playbook.md`.3031## Resources3233- `resources/implementation-playbook.md` for detailed patterns and examples.
Run npx skillmds@latest add comeonoliver/react-modernization in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
React Modernization It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
ComeOnOliver (@comeonoliver) published this skill. Their other Agent Skills are listed on their SkillMD profile.
ComeOnOliver