System Prompt / Instructions
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.mdfor detailed patterns and examples.
Frequently Asked Questions
What is react-modernization?
react-modernization is an expert AI persona designed to improve your coding workflow. Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions. It provides senior-level context directly within your IDE.
How do I install the react-modernization skill in Cursor or Windsurf?
To install the react-modernization skill, download the package, extract the files to your project's .cursor/skills directory, and type @react-modernization in your editor chat to activate the expert instructions.
Is react-modernization free to download?
Yes, the react-modernization AI persona is completely free to download and integrate into compatible Agentic IDEs like Cursor, Windsurf, Github Copilot, and Anthropic MCP servers.
react-modernization
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
Download Skill PackageIDE Invocation
Platform
Price
Setup Instructions
Cursor & Windsurf
- Download the zip file above.
- Extract to
.cursor/skills - Type
@react-modernizationin editor chat.
Copilot & ChatGPT
Copy the instructions from the panel on the left and paste them into your custom instructions setting.
"Adding this react-modernization persona to my Cursor workspace completely changed the quality of code my AI generates. Saves me hours every week."
Level up further
Developers who downloaded react-modernization also use these elite AI personas.
3d-web-experience
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.
ab-test-setup
Structured guide for setting up A/B tests with mandatory gates for hypothesis, metrics, and execution readiness.
accessibility-compliance-accessibility-audit
You are an accessibility expert specializing in WCAG compliance, inclusive design, and assistive technology compatibility. Conduct audits, identify barriers, and provide remediation guidance.