react-modernization

$npx mdskill add benjaminasterA/antigravity-awesome-skills/react-modernization

Modernize React apps by upgrading versions, migrating to hooks, and adopting concurrent features.

  • Upgrades React applications to latest versions and migrates class components to hooks.
  • Depends on React codemods, TypeScript, and React 18+ APIs like Suspense and transitions.
  • Analyzes codebase to determine upgrade path and apply best practices for modernization.
  • Provides actionable steps, automated transformations, and verification of outcomes.

SKILL.md

.github/skills/react-modernizationView on GitHub ↗
---
name: react-modernization
description: "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..."
risk: unknown
source: community
---

# 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.

More from benjaminasterA/antigravity-awesome-skills

SkillDescription
2d-games2D game development principles. Sprites, tilemaps, physics, camera.
3d-games3D game development principles. Rendering, shaders, physics, cameras.
3d-web-experienceExpert 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 ...
accessibility-compliance-accessibility-auditYou are an accessibility expert specializing in WCAG compliance, inclusive design, and assistive technology compatibility. Conduct audits, identify barriers, and provide remediation guidance.
active-directory-attacksThis skill should be used when the user asks to \"attack Active Directory\", \"exploit AD\", \"Kerberoasting\", \"DCSync\", \"pass-the-hash\", \"BloodHound enumeration\", \"Golden Ticket\", ...
activecampaign-automationAutomate ActiveCampaign tasks via Rube MCP (Composio): manage contacts, tags, list subscriptions, automation enrollment, and tasks. Always search tools first for current schemas.
address-github-commentsUse when you need to address review or issue comments on an open GitHub Pull Request using the gh CLI.
agent-framework-azure-ai-pyBuild Azure AI Foundry agents using the Microsoft Agent Framework Python SDK (agent-framework-azure-ai). Use when creating persistent agents with AzureAIAgentsProvider, using hosted tools (code int...
agent-manager-skillManage multiple local CLI agents via tmux sessions (start/stop/monitor/assign) with cron-friendly scheduling.
agent-memory-mcpA hybrid memory system that provides persistent, searchable knowledge management for AI agents (Architecture, Patterns, Decisions).