frontend-migration-workflow

Guide systematic migration from Vanilla JavaScript to React 19 with TypeScript.

Updated Nov 21, 2025

Search Tags:#typescript #workflow #refactoring #frontend #react #javascript #migration

Ready to run

npx skills add https://github.com/donchrillo/temu --skill frontend-migration-workflow

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-migration-workflow
Source: https://github.com/donchrillo/temu/tree/main/.opencode/skills/frontend-migration-workflow
Command: npx skills add https://github.com/donchrillo/temu --skill frontend-migration-workflow

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, react-dom, react-router-dom, vitest, playwright, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a systematic process to migrate legacy frontend applications from Vanilla JavaScript to modern React 19 with TypeScript, ensuring maintainability and type safety.

Core Features & Use Cases

Phased Migration: Guides through Analysis, Planning, Implementation, and Integration.
Component Mapping: Identifies and maps Vanilla JS patterns to React components.
State & API Management: Defines strategies for state management and API call handling in React.
Testing Strategies: Includes guidance on unit and integration testing for migrated components.
Use Case: Transitioning a large, complex enterprise application's frontend from an outdated JavaScript framework to a modern, scalable React architecture.

Quick Start

Execute the frontend-migration-workflow skill to begin the process of migrating a Vanilla JS frontend to React 19.

Frequently Asked Questions about frontend-migration-workflow

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

FAQPage Schema

How do I migrate Vanilla JavaScript to React 19 with TypeScript?▼

To migrate Vanilla JavaScript to React 19, this workflow guides you through a phased process: Analysis, Planning, Implementation, and Integration. It ensures maintainability and type safety by mapping state, APIs, and components systematically.

What is the best way to map Vanilla JS patterns to React components?▼

Mapping Vanilla JS patterns to React components involves identifying existing UI structures and translating them into modular React components. The workflow provides strategies for component identification, state management mapping, and custom hook creation to ensure a modern architecture.

Can I incrementally adopt React 19 in a large enterprise JavaScript application?▼

Yes, you can incrementally adopt React 19 in a large enterprise application. The workflow facilitates incremental migration by defining TypeScript interfaces and testing strategies, allowing you to transition complex frontends without a complete rewrite.

How do I handle state management and API calls when refactoring JavaScript to React?▼

When refactoring JavaScript to React, state management and API calls are handled by defining specific migration strategies. The workflow maps existing Vanilla JS state logic to React patterns and outlines API call handling within custom hooks.

What testing strategies are needed when migrating to React 19 and TypeScript?▼

Testing strategies for migrating to React 19 and TypeScript include unit and integration testing for migrated components. The workflow integrates Vitest and Playwright to validate component behavior and ensure robust frontend architecture throughout the migration.

Does this migration workflow support React Router and Vitest?▼

Yes, the migration workflow supports React Router and Vitest as core dependencies. It leverages these tools alongside React 19 to facilitate component routing and establish comprehensive testing strategies during the Vanilla JS transition.