Is TypeScript supported during the modernization process?

Yes, the skill includes guidance and implementation patterns for migrating JavaScript React components to TypeScript, including prop interface definitions and generic component support.

Can this skill handle React 16 to 18 upgrades?

Yes, it provides specific upgrade paths from React 16 through 17 and into 18, including handling breaking changes and new APIs like createRoot and automatic batching.

How does it help with React performance?

It assists in identifying performance bottlenecks and suggests optimizations such as React.memo, useMemo, useCallback, and strategic code splitting with Suspense.

Does it automate the conversion of class components to hooks?

It leverages automated codemods and standard transformation patterns to convert class-based state and lifecycle methods into modern functional components with hooks.

React Modernization & Upgrade

Name: React Modernization & Upgrade
Author: HermeticOrmus

byHermeticOrmus

0•

開発者ツール

Upgrades React applications to the latest versions, migrates class components to hooks, and implements concurrent features using automated codemods.

The React Modernization skill is a comprehensive toolkit designed to transition legacy React codebases into modern, high-performance applications. It guides developers through the complexities of version upgrades (from React 16 through 18 and beyond), automates the refactoring of class-based components into functional components with hooks, and assists in the adoption of concurrent rendering features like Suspense and transitions. By integrating automated codemods and providing best practices for performance optimization and TypeScript migration, this skill minimizes technical debt and ensures a stable, future-proof frontend architecture.

主な機能

01Performance optimization via memoization, code splitting, and new root APIs.

02Automated class-to-functional component migration with React Hooks patterns.

03Comprehensive TypeScript migration support for legacy JavaScript components.

04React 18 concurrent rendering implementation including Suspense and transitions.

05Automated refactoring using jscodeshift and official React codemods.

060 GitHub stars

ユースケース

01Refactoring complex class lifecycle methods into clean, reusable custom hooks.

02Transitioning a standard JavaScript React codebase to a strictly typed TypeScript environment.

03Upgrading legacy React 16 or 17 projects to utilize React 18 concurrent features.

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

主な機能

01Performance optimization via memoization, code splitting, and new root APIs.

02Automated class-to-functional component migration with React Hooks patterns.

03Comprehensive TypeScript migration support for legacy JavaScript components.

04React 18 concurrent rendering implementation including Suspense and transitions.

05Automated refactoring using jscodeshift and official React codemods.

060 GitHub stars

ユースケース

01Refactoring complex class lifecycle methods into clean, reusable custom hooks.

02Transitioning a standard JavaScript React codebase to a strictly typed TypeScript environment.

03Upgrading legacy React 16 or 17 projects to utilize React 18 concurrent features.