How to use the React Modernization agent skill

What the skill makes the agent do

Agent skills are folders of instructions that an AI agent loads when a task matches the skill's description. This one covers React version upgrades (16 to 17 to 18), migrating class components to function components, and using concurrent features. The main file, SKILL.md, lists breaking changes for React 17 and 18 and gives before-and-after code for state, lifecycle methods, context, higher-order components and root rendering.

When you ask for help modernizing a React codebase, the agent applies these patterns to your code instead of relying only on general knowledge.

• Class state becomes useState calls.
• componentDidMount, componentDidUpdate and componentWillUnmount become useEffect with a cleanup function.
• Context consumers and HOCs become useContext and custom hooks.
• ReactDOM.render becomes createRoot(...).render(...).
• Transitions with useTransition and Suspense boundaries for data loading.

Install the react-modernization skill

The skill is distributed as a ZIP file from this page. Download it, then unzip it into one of two locations depending on how you want to use it:

For all your projects, unzip it into ~/.claude/skills/ so the skill folder sits there as react-modernization.

For a single project, unzip it into the project's .claude/skills/ folder.

If you use the Claude apps instead, open Settings, go to Capabilities, and upload the skill under Skills.

Trigger the skill with natural requests

You do not need a special command. The skill's description tells the agent when to use it, so plain requests work. Good triggers mention modernizing React code, migrating to hooks, or upgrading React versions.

Name the files or components you want changed. The more specific the request, the more useful the output.

• Modernize the class components in src/components/ to function components with hooks.
• Upgrade this React 16 app to React 18 and switch to createRoot.
• Convert DataFetcher.jsx so the request is cancelled when the id prop changes and the component unmounts.
• Replace the HOC in withUser.js with a custom hook.

What the skill covers in practice

The skill's examples are hand-written conversions. Each one shows a class version and a hooks version side by side. The data-fetching example, for instance, uses a cancelled flag inside useEffect so a late response does not update an unmounted component.

For automation, references/details.md lists jscodeshift commands that run React codemods. These include renaming unsafe lifecycle methods, updating React imports, and adding error boundaries. A dry-run flag previews changes before anything is written.

Safety notes: scripts, network and behavior changes

The skill itself runs no scripts and uses no network access. However, the codemod commands in references/details.md fetch transforms from a URL and run npx, so they do use the network when you run them yourself. Review the command and the transform before you run it, and use the dry-run flag first.

Refactors can change behavior even when they compile. The source flags Strict Mode double invocation and effect cleanup timing as areas to check. Run your tests before and after the migration, and review each changed component.

• Use a version control branch so you can revert easily.
• Run the test suite after each conversion step.
• Check effects that fetch data or subscribe to events, since cleanup timing matters.
• Expect Strict Mode to run effects twice in development.

Tips for better results

Migrate one component or folder at a time rather than the whole app in one request. Smaller changes are easier to test and review.

Ask the agent to explain each conversion. Its explanations make it easier to catch mistakes in lifecycle logic.

• Give the agent the file path and the React version you are moving from and to.
• Ask for a dry run of codemods before a real run.
• Ask for tests around a component before converting it.