Does it support automated code transformations?

Yes, it includes instructions and scripts for using jscodeshift and official React codemods to automate repetitive refactoring tasks.

Is the migration performed all at once?

The skill advocates for an incremental migration strategy, starting with leaf components and using a checklist to ensure stability throughout the process.

Can this skill handle React 18 breaking changes?

Yes, it provides specific implementation guidance for the new Root API, automatic batching, and changes to Strict Mode and Suspense.

Can I use this for TypeScript migration?

Absolutely. The skill includes patterns for defining component interfaces, generic types, and converting JavaScript components to TypeScript.

React Modernization

Name: React Modernization
Author: HermeticOrmus

byHermeticOrmus

0•

개발자 도구

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

This skill empowers Claude to systematically upgrade React applications by migrating class-based components to functional components with Hooks, implementing React 18 features like concurrent rendering and automatic batching, and applying automated codemods. It provides structured guidance for navigating breaking changes between versions 16, 17, and 18, while ensuring performance optimization through memoization and code splitting. It is an essential tool for developers looking to reduce technical debt and leverage the latest ecosystem advancements with AI-driven precision.

주요 기능

01Automated refactoring via jscodeshift codemods

020 GitHub stars

03React 18 concurrent feature implementation (Suspense, Transitions)

04Performance optimization using memoization and code splitting

05Class-to-Hooks migration patterns

06TypeScript conversion and prop-type modernization

사용 사례

01Converting complex class component libraries to functional components

02Upgrading legacy React 16 applications to React 18+

03Optimizing application performance with concurrent rendering

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hermeticormus/after-the-third-cup react-modernization

For use in Claude.ai and ChatGPT

주요 기능

01Automated refactoring via jscodeshift codemods

020 GitHub stars

03React 18 concurrent feature implementation (Suspense, Transitions)

04Performance optimization using memoization and code splitting

05Class-to-Hooks migration patterns

06TypeScript conversion and prop-type modernization

사용 사례

01Converting complex class component libraries to functional components

02Upgrading legacy React 16 applications to React 18+

03Optimizing application performance with concurrent rendering

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hermeticormus/after-the-third-cup react-modernization

For use in Claude.ai and ChatGPT