Can I use this for TypeScript migration?

Absolutely. The skill provides standardized templates and interfaces for converting JavaScript components and hooks into type-safe TypeScript equivalents.

Does this skill support React 18 concurrent features?

Yes, it includes specific implementation patterns for the new Root API, automatic batching, Transitions, and Suspense for data fetching.

How does it handle class component lifecycles?

It provides a clear mapping of legacy methods like componentDidMount and componentDidUpdate to modern useEffect dependency arrays and cleanup functions.

Does it include automated refactoring tools?

Yes, the skill provides guidance and scripts for using jscodeshift and React-specific codemods to automate repetitive tasks like renaming UNSAFE lifecycle methods.

React Modernization

Name: React Modernization
Author: HermeticOrmus

byHermeticOrmus

0•

開発者ツール

Upgrades legacy React applications to modern hooks-based architectures and implements React 18 concurrent features.

This skill provides a specialized framework for modernizing React codebases, focusing on the transition from legacy class components to functional components with hooks and the adoption of React 18+ features. It offers domain-specific guidance for navigating breaking changes across versions, utilizing codemods for automated refactoring, and implementing concurrent rendering patterns like Suspense and Transitions. By providing standardized migration checklists and performance optimization patterns, it ensures that developers can systematically update state management, lifecycle logic, and TypeScript definitions with minimal friction.

主な機能

01Step-by-step migration paths for React 16, 17, and 18

02Class-to-hooks transformation patterns for state and lifecycle methods

03Implementation guides for React 18 Concurrent features and Automatic Batching

04Codemod orchestration for automated large-scale codebase refactoring

05TypeScript migration templates for components and custom hooks

060 GitHub stars

ユースケース

01Upgrading existing applications to React 18 to utilize concurrent rendering

02Converting an enterprise legacy class-based codebase to modern React Hooks

03Optimizing application performance through memoization and code-splitting patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hermeticormus/alqvimia-contador react-modernization

For use in Claude.ai and ChatGPT

Download Skill