react-modernization
Master React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation.
Best use case
react-modernization is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Master React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation.
Teams using react-modernization should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/react-modernization/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How react-modernization Compares
| Feature / Agent | react-modernization | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Master React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# React Modernization Master React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation. ## Use this skill when - Upgrading React applications to latest versions - Migrating class components to functional components with hooks - Adopting concurrent React features (Suspense, transitions) - Applying codemods for automated refactoring - Modernizing state management patterns - Updating to TypeScript - Improving performance with React 18+ features ## Do not use this skill when - The task is unrelated to react modernization - You need a different domain or tool outside this scope ## Instructions - Clarify goals, constraints, and required inputs. - Apply relevant best practices and validate outcomes. - Provide actionable steps and verification. - If detailed examples are required, open `resources/implementation-playbook.md`. ## Resources - `resources/implementation-playbook.md` for detailed patterns and examples. ## Limitations - Use this skill only when the task clearly matches the scope described above. - Do not treat the output as a substitute for environment-specific validation, testing, or expert review. - Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
Related Skills
vercel-react-view-transitions
Guide React and Next.js view transitions, shared element animations, route transitions, transition types, and reduced-motion-safe UI state animation.
react-ui-patterns
Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.
react-state-management
Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.
react-patterns
Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
react-nextjs-development
React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.
react-native-skills
Use when working with react-native-skills tasks or workflows
react-native-architecture
Production-ready patterns for React Native development with Expo, including navigation, state management, native modules, and offline-first architecture.
react-flow-node-ts
Create React Flow node components following established patterns with proper TypeScript types and store integration.
react-flow-architect
Build production-ready ReactFlow applications with hierarchical navigation, performance optimization, and advanced state management.
react-component-performance
Diagnose slow React components and suggest targeted performance fixes.
react-best-practices
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Use when writing new React components or Next.js pages, implementing data fetching (client or server-side), or reviewing code for performance issues.
fp-ts-react
Practical patterns for using fp-ts with React - hooks, state, forms, data fetching. Use when building React apps with functional programming patterns. Works with React 18/19, Next.js 14/15.