skills.rest
mindcockpit-ai
mindcockpit-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

react-migration

Migrate JavaScript React codebases to TypeScript with phased assessment and toolchain modernization.

11|1|Updated Feb 9, 2026
Search Tags:#typescript#react#migration#eslint#zod#vite#code-migration
One-click install
npx skills add https://github.com/mindcockpit-ai/cognitive-core --skill react-migration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-migration
Source: https://github.com/mindcockpit-ai/cognitive-core/tree/main/language-packs/react/skills/react-migration
Command: npx skills add https://github.com/mindcockpit-ai/cognitive-core --skill react-migration

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Migrating large React codebases from untyped JavaScript to TypeScript is error-prone, time-consuming, and risky; this guide reduces migration risk by providing a phased, verifiable approach that balances incremental typing with build and tooling modernization.

Core Features & Use Cases

  • Progressive migration framework: assessment, permissive tsconfig setup, file-by-file renames, incremental strictness, and tracking to minimize disruption.
  • Legacy pattern replacement & modernization: convert class components to functional components, replace PropTypes with TypeScript types and Zod validation, and migrate CRA→Vite and Jest→Vitest.
  • Practical validation and tooling: includes repo scanning checks, suggested tsconfig flags, typecheck scripts, ESLint flat-config guidance, and common pitfalls to avoid.
  • Use Case: Plan and execute a migration for a legacy CRA app with many class components, untyped API responses, and mixed JS/JSX files to achieve gradual strict typing and modern tooling.

Quick Start

Request a migration readiness report for this repository and a prioritized plan to convert leaf components, API types, and build tooling to TypeScript.

Frequently Asked Questions about react-migration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate a React codebase to TypeScript incrementally?▼

Migrate React to TypeScript incrementally by enabling allowJs in tsconfig, renaming files progressively, typing leaf components first, and applying strict flags gradually to minimize disruption and maintain build stability.

What's the best way to replace PropTypes with TypeScript types and Zod validation?▼

Replace PropTypes by defining TypeScript type definitions for component props and integrating Zod schemas to validate untyped API response shapes at runtime during the React migration process.

Can I migrate a Create React App project to Vite and TypeScript at the same time?▼

Yes, you can migrate Create React App to Vite while adding TypeScript by updating build scripts, configuring the Vite toolchain, and progressively renaming JS files to TS alongside tooling modernization.

Does migrating from Jest to Vitest work with a progressive TypeScript React migration?▼

Migrating Jest to Vitest fits progressive TypeScript migrations by allowing co-existence of JS and TS test files, aligning test tooling with Vite, and updating ESLint flat-config for type-aware linting.

How do I handle untyped API responses when converting React to TypeScript?▼

Handle untyped API responses in React TypeScript migrations by generating Zod schemas for runtime validation, defining inferred TypeScript types from those schemas, and progressively typing API consumption layers.

When should I not use a progressive React TypeScript migration approach?▼

Avoid progressive React TypeScript migration if the repository lacks a reliable test suite for verification, has insufficient build tooling support for allowJs, or cannot accommodate staged file-by-file renames.

Related Skills

Explore More Software Engineering Skills→
NKDShinKuNKDShinKu

vue-jsx-best-practices

Align Vue JSX attribute usage and tooling configuration with Vue conventions.

Community
Basic
grimlorgrimlor
2

typescript-code-standards

Configure TypeScript toolchain with strict compiler, ESLint, Jest, and pre-commit settings.

Community
Intermediate
oakossoakoss
1

zod

Validate runtime data against Zod v4 schemas in TypeScript projects.

Official
Intermediate
hmzainjamilhmzainjamil
1

batch-processor

Processes large sets of office documents with parallel execution and checkpointed resume.

Community
Advanced