Can I use this for TypeScript migration?

Absolutely. The skill includes comprehensive patterns for defining interfaces for props, state, and generic components during the modernization process.

Does this skill handle the React 18 Root API change?

Yes, it provides specific patterns and automated steps to migrate from the legacy ReactDOM.render to the new createRoot API required for React 18 features.

Will it help with automated refactoring?

Yes, it includes guidance on using jscodeshift and specific React codemods to automate repetitive tasks like renaming unsafe lifecycle methods or updating JSX transforms.

How does it handle complex lifecycle methods during hook migration?

It provides a mapping system to translate componentDidMount, componentDidUpdate, and componentWillUnmount into optimized useEffect and custom hook patterns.

React Modernization

Name: React Modernization
Author: EngineerWithAI

byEngineerWithAI

0•

Design Tools

Upgrades React applications to modern standards by migrating class components to hooks and adopting React 18+ features.

The React Modernization skill provides a comprehensive framework for updating legacy React codebases to the latest industry standards. It offers specialized guidance for version upgrades (React 16 through 18+), converting class components to functional components using Hooks, and implementing modern concurrent features like Suspense and Transitions. By leveraging automated codemods and standardized migration checklists, this skill helps developers improve application performance, maintainability, and developer experience while minimizing breaking changes.

Key Features

01Automated class-to-hooks migration with state and lifecycle preservation

02Automated refactoring using jscodeshift and React-specific codemods

03React 18 concurrent feature implementation including Transitions and Suspense

040 GitHub stars

05Version-specific upgrade paths and breaking change mitigation

06TypeScript migration support for modernizing prop types and generic components

Use Cases

01Upgrading an older project to React 18 to leverage automatic batching and concurrent rendering

02Refactoring a legacy enterprise application from class components to functional hooks

03Systematically migrating a JavaScript React codebase to a type-safe TypeScript architecture

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add engineerwithai/engineerwith-agents react-modernization

For use in Claude.ai and ChatGPT

Download Skill