Skills react-modernization

📦

react-modernization

Name: react-modernization
Author: sickn33

Content revision r1 Safe ⚡ Contains scripts⚙️ External commands🌐 Network access

Modernize React Apps With Hooks and React 18

Legacy React code can slow upgrades, testing, and performance work. This skill guides class-to-hooks migrations, React 18 adoption, TypeScript conversion, and codemod planning.

Supports: Claude Codex Code(CC)

🥉 79 Bronze

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request

Review the Skillstore skill "react-modernization" from https://skillstore.io/skills/sickn33-react-modernization.md and its manifest at https://skillstore.io/api/skills/sickn33-react-modernization/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/sickn33-react-modernization.md Signed manifest GET /api/skills/sickn33-react-modernization/manifest Signed lockfile GET /api/skills/sickn33-react-modernization/lockfile

Test it

Using "react-modernization". A team needs to move a React 16 app toward React 18 without a full rewrite.

Expected outcome:

A staged upgrade plan that starts with dependency review, then React 17 compatibility, React 18 root changes, StrictMode fixes, and focused regression tests.

Using "react-modernization". A class component uses state, mount logic, update logic, and cleanup.

Expected outcome:

A migration explanation that maps state to hooks, moves lifecycle behavior into effects, preserves cleanup, and lists behavior to test.

Using "react-modernization". A dashboard has slow list rendering after a modernization pass.

Expected outcome:

A performance review that checks render causes, memoization value, callback stability, code splitting, and measurable before-and-after validation.

Security Audit

Safe

v5 • 7/7/2026 Open versioned report

The static findings are false positives in React tutorial examples and Markdown references. Dynamic imports and fetch calls are illustrative application code, not skill execution, and no prompt injection or data exfiltration intent was found.

Files scanned

548

Lines analyzed

Review items

False positives ignored

Risk Factors

⚡ Contains scripts (2)

resources/implementation-playbook.md:400 resources/implementation-playbook.md:401

⚙️ External commands (4)

resources/implementation-playbook.md:105-129 resources/implementation-playbook.md:129-154 SKILL.md:30 SKILL.md:34

🌐 Network access (2)

resources/implementation-playbook.md:105 resources/implementation-playbook.md:129

No confirmed security findings were detected by the latest completed static and semantic audit. This does not prove the skill has no side effects.

Audited by: codex View Audit History →

Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report

Copy report link

https://skillstore.io/skills/sickn33-react-modernization/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/sickn33-react-modernization/security.svg)](https://skillstore.io/skills/sickn33-react-modernization?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/sickn33-react-modernization?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-react-modernization/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/sickn33-react-modernization.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

Academic citations (APA · BibTeX · CFF)

APA citation

sickn33. (2026). react-modernization security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-react-modernization/audits/5

BibTeX citation

@techreport{sickn33-sickn33-react-modernization-2026,
  author = {sickn33},
  title = {react-modernization security audit report (audit version 5)},
  institution = {Skillstore},
  year = {2026},
  number = {5},
  url = {https://skillstore.io/skills/sickn33-react-modernization/audits/5},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "react-modernization security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
  - name: "sickn33"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/sickn33-react-modernization/audits/5"
identifiers:
  - type: other
    value: "skillstore:sickn33-react-modernization:audit:5"
    description: "Skillstore immutable audit report identifier"

Compare variants

2 installable variants

Each author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.

Why this variant is first

Highest Skillstore Score

Author / source Skillstore Score Evidence Confidence Skillstore usage Updated

sickn33 Recommended Current

sickn33-react-modernization

Skillstore Score 79

Evidence Confidence High

Skillstore usage 13

Updated

2026-08-21

wshobson

wshobson-react-modernization

Skillstore Score 77

Evidence Confidence High

Skillstore usage 11

Updated

2026-08-21

Skillstore Score

Why this score Evidence Confidence: High

Architecture

Maintainability

Content

Community

Spec Compliance

What You Can Build

Upgrade Planning

Create an incremental React upgrade plan with risks, testing checkpoints, and rollout steps.

Hooks Migration

Convert class components to functional components while preserving lifecycle behavior and cleanup.

Performance Review

Identify useful React 18, memoization, and code-splitting improvements for a production interface.

Try These Prompts

Assess an Upgrade

Review this React project context and propose an incremental modernization plan. Include version steps, likely risks, and validation checkpoints.

Convert a Component

Convert this class component to a functional component with hooks. Preserve state behavior, lifecycle timing, cleanup, and public props.

Adopt React 18 Features

Review this React 17 code and recommend React 18 changes. Cover root setup, StrictMode effects, batching, transitions, Suspense, and test updates.

Plan Codemod Work

Design a codemod-assisted migration plan for this React codebase. Include candidate transformations, manual review steps, rollback points, and verification tasks.

Best Practices

Upgrade incrementally and keep each change tied to a testable checkpoint.
Start hooks migrations with simple leaf components before shared containers.
Measure performance before adding memoization or code splitting.

Avoid

Migrating every component at once without staged validation.
Adding hooks mechanically without checking lifecycle behavior and cleanup.
Running codemods without review, tests, and rollback planning.

Frequently Asked Questions

Can this skill upgrade a full React app automatically?

No. It provides plans, patterns, and review guidance. A developer still applies changes and validates behavior.

Does it support React 18 migrations?

Yes. It covers createRoot, batching, StrictMode effects, transitions, Suspense, and related testing concerns.

Can it help convert class components to hooks?

Yes. It maps state, lifecycle methods, context, cleanup, and reusable logic to hooks.

Does it include codemod guidance?

Yes. It suggests codemod workflows for repetitive changes and stresses review before merging generated edits.

Is it useful for TypeScript migrations?

Yes. It includes component prop typing and generic component patterns for React code.

What inputs make results better?

Provide current React version, framework, package constraints, representative components, test coverage, and upgrade goals.

Developer Details

Author

sickn33

License

MIT

Skillstore revision

Version notice

The author did not declare a version.

Repository

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-modernization

Ref

9f814fc6a43fd99946f2da5e0df231c65a38bc76

Maintenance freshness

7/18/2026

Usage

7 downloads · 107 views

File structure

📁 resources/

📄 implementation-playbook.md

📄 SKILL.md