cra-to-vite-migrator

Installation
SKILL.md

CRA → Vite Migrator

Phase 1 — THINK (do this before touching any file)

Before writing a single line, inspect the project and build a mental model:

  • Read package.json fully: react-scripts version, all dependencies, and any CRACO/react-app-rewired overrides (these signal hidden webpack customizations that Vite won't replicate for free).
  • Scan for REACT_APP_ env vars across the codebase (not just .env) — every usage site needs updating, not just the .env file.
  • Check for CSS Modules, SVG-as-component imports (import { ReactComponent as X }), and absolute imports via jsconfig/tsconfig baseUrl — these are the three most common CRA→Vite breakage points.
  • Check for Jest config (CRA ships Jest by default) — decide now whether to migrate tests to Vitest or leave Jest running standalone, and say so explicitly to the user. Don't silently drop test coverage.
  • Identify any window/process.env polyfills CRA silently provided that Vite does not.

Do not proceed to Phase 2 until you can summarize, in a few sentences, what's risky about this specific project's migration — not a generic CRA→Vite risk list.

Phase 2 — PLAN (show this to the user, wait for go-ahead on anything destructive)

Produce a written migration plan covering:

  1. New file tree (vite.config.js/ts location, index.html moved to root, entry point changes)
  2. Every env var rename (REACT_APP_FOO → VITE_FOO), listed explicitly, not just "rename the prefix"
  3. Every import that needs rewriting (SVG imports, absolute path imports, %PUBLIC_URL% references in index.html)
  4. Whether tests move to Vitest or stay on Jest, and why
  5. A rollback plan: keep the CRA setup on a branch/tag until the Vite build is verified in a real deploy, not just vite build succeeding locally
Installs
5
Repository
theamitv/skills
First Seen
Aug 1, 2026