Does it support TypeScript migration?

Yes, the skill provides patterns for moving from standard JSX to TypeScript, including defining interfaces for props, state, and generic components.

How does this skill help with React 18 upgrades?

It provides specific instructions for implementing the new Root API, handling automatic batching changes, and correctly utilizing Suspense for data fetching.

Can it automate the conversion of class components?

Yes, it includes guidance on using specialized codemods to automate the bulk of the transformation from class components to functional components with hooks.

What performance optimizations are included?

The skill covers implementation of memoization hooks, code-splitting with React.lazy, and optimizing re-renders using the latest React 18 rendering features.

React Modernization

Name: React Modernization
Author: ccf

byccf

0•

생산성 및 워크플로

Modernizes legacy React codebases by migrating class components to hooks, upgrading to React 18+, and implementing concurrent features.

The React Modernization skill equips Claude with specialized knowledge to navigate complex React version upgrades and architectural shifts. It provides structured guidance for transitioning from legacy class components to modern functional components with hooks, adopting React 18's concurrent rendering features like Transitions and Suspense, and utilizing codemods for automated bulk refactoring. This skill is essential for developers looking to reduce technical debt, improve application performance through modern state management, and ensure their frontend stack adheres to the latest industry standards and performance optimizations.

주요 기능

01Automated refactoring guidance via jscodeshift and React codemods

02React 18 upgrade support including New Root API and automatic batching

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

04Implementation of Concurrent features like useTransition and Suspense

050 GitHub stars

06Comprehensive Class-to-Hooks migration patterns and lifecycle mapping

사용 사례

01Incremental TypeScript migration for large-scale JavaScript React projects

02Converting a legacy component library from class-based to hook-based architecture

03Upgrading an enterprise React 16 application to the latest stable version

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ccf/claude-code-ccf-marketplace react-modernization

For use in Claude.ai and ChatGPT

주요 기능

01Automated refactoring guidance via jscodeshift and React codemods

02React 18 upgrade support including New Root API and automatic batching

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

04Implementation of Concurrent features like useTransition and Suspense

050 GitHub stars

06Comprehensive Class-to-Hooks migration patterns and lifecycle mapping

사용 사례

01Incremental TypeScript migration for large-scale JavaScript React projects

02Converting a legacy component library from class-based to hook-based architecture

03Upgrading an enterprise React 16 application to the latest stable version

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ccf/claude-code-ccf-marketplace react-modernization

For use in Claude.ai and ChatGPT