Can I use this for TypeScript migration?

Absolutely. The skill includes patterns for converting JavaScript components and props to type-safe TypeScript interfaces and generic components.

How does it handle complex lifecycle methods during migration?

It provides a mapping system to translate legacy methods like componentDidMount, componentDidUpdate, and componentWillUnmount into the appropriate useEffect hook configurations.

Does it automate the refactoring process?

The skill provides guidance and shell scripts to run jscodeshift codemods, enabling automated, large-scale transformations across your entire src directory.

Does this skill handle React 18's breaking changes?

Yes, it provides specific implementation patterns for the New Root API, automatic batching, and handling Strict Mode changes during upgrades.

React Modernization & Migration

Name: React Modernization & Migration
Author: amurata

byamurata

•

Developer Tools

Refactors legacy React codebases to modern standards, including Hooks, React 18 concurrent features, and TypeScript integration.

This skill empowers Claude to systematically modernize React applications by automating the transition from legacy class-based components to functional components with hooks, upgrading version-specific dependencies, and implementing React 18 features like automatic batching and concurrent rendering. It provides a structured framework for applying codemods, optimizing performance through memoization, and ensuring type safety with TypeScript, making it an essential tool for developers maintaining aging frontend architectures or seeking to leverage the latest React ecosystem improvements.

Key Features

01Automated Class-to-Hooks conversion patterns

02React 18 upgrade support (New Root API, Transitions, Suspense)

033 GitHub stars

04TypeScript migration strategies for existing JS components

05Performance optimization using useMemo, useCallback, and React.memo

06Refactoring via jscodeshift codemods and custom transforms

Use Cases

01Upgrading a legacy React 16 enterprise application to the latest stable React 18 version

02Refactoring complex lifecycle-heavy class components into cleaner, testable functional components

03Implementing concurrent rendering to improve UI responsiveness in data-intensive dashboards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add amurata/cc-tools react-modernization

For use in Claude.ai and ChatGPT

Download Skill