Skip to content
Get packs

React Modernization

Upgrade React apps, move class components to hooks, and adopt React 18 concurrent features.

Source Download skill
Repository
wshobson/agents
Stars
42,095
Licence
MIT
Files
2 files

What it does

Once installed, the agent knows React upgrade paths (16 to 17 to 18), how to convert class components with state and lifecycle methods into function components using hooks like useState, useEffect and useContext, and how to use React 18 features such as createRoot, automatic batching, transitions and Suspense. When you ask for help modernizing a React codebase, it applies these patterns to your code instead of relying on general knowledge. It also mentions codemods for automated refactoring, though the main file focuses on hand-written before-and-after examples.

Great for

  • Developers maintaining an older React app built with class components
  • Teams planning a move from React 16 or 17 to React 18
  • Engineers who want consistent before-and-after conversion examples

Skip it if

  • Projects already on current React that only need routine bug fixes, since the advice targets older patterns
  • Non-React frameworks such as Vue or Angular, where these patterns do not apply
  • Large production migrations without tests, because automated or hand-applied refactors can change behavior, for example Strict Mode double invocation or effect cleanup timing

Try asking

  • “Convert this class component with lifecycle methods into a function component using hooks”
  • “Show me how to move our React 17 app to createRoot and React 18 automatic batching”
  • “Refactor this data-fetching component so it cancels requests on unmount using useEffect”
  • “Replace this higher-order component with a custom hook”
Step-by-step guide: how to use React ModernizationInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    react-modernization.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip react-modernization.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip react-modernization.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Ask for changes in small steps and run your test suite after each one, since the skill gives patterns rather than verified migrations
  • Name your current and target React versions so the agent applies the right breaking-change notes
  • Read references/details.md for the fuller pattern library if you need more worked examples

What's inside

  • references/details.md
  • SKILL.md

Redistributed unmodified from wshobson/agents under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.