react-modernization SKILL.md skillA

react-modernization from hermeticormus/claude-code-game-development is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.

mdr add hermeticormus/claude-code-game-development/react-modernization@git:20251120.50bf83d

Pins git:20251120.50bf83d in mdr.lock. Pin the fingerprint instead.

Audit grade

A, 17 of 17 checks passed

Kind

SKILL.md skill

Repository

hermeticormus/claude-code-game-development

Path

plugins/framework-migration/skills/react-modernization/SKILL.md

Versions recorded

1

Latest version

git:20251120.50bf83d, committed Nov 20, 2025

Size

11,705 bytes

Repository stars

72

License

MIT

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.

Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.

What the file says

# React Modernization

Master React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation.

## When to Use This Skill

- 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

## Version Upgrade Path

### React 16 → 17 → 18

**Breaking Changes by Version:**

**React 17:**
- Event delegation changes
- No event pooling
- Effect cleanup timing
- JSX transform (no React import needed)

**React 18:**
- Automatic batching
- Concurrent rendering
- Strict Mode changes (double invocation)
- New root API
- Suspense on server

## Class to Hooks Migration

### State Management
```javascript
// Before: Class component
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      name: ''
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
…

Read the whole file at its exact version.

How to install

mdr add hermeticormus/claude-code-game-development/react-modernization@sha256:d8be354a91a45471

[![mdr](https://markdownregistry.com/badge/art_s7p4j3jpj6efdsc3.svg)](https://markdownregistry.com/a/art_s7p4j3jpj6efdsc3)

Versions

The registry has recorded 1 version of this file, committed on Nov 20, 2025.

Audit of the latest version

Source

API

GET https://markdownregistry.com/api/v1/artifacts/art_s7p4j3jpj6efdsc3
GET https://markdownregistry.com/api/v1/resolve?ref=hermeticormus/claude-code-game-development/react-modernization
GET https://markdownregistry.com/api/v1/blob/d8be354a91a45471eb56fbfe4f15f7928e5614847f5a43ff818ba3125cc0c934

Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.

Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.

More from hermeticormus/claude-code-game-development

Every file in hermeticormus/claude-code-game-development

Other files named react-modernization

Browse by kind, by grade A, or by owner.