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.jsonfully:react-scriptsversion, 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.envfile. - Check for CSS Modules, SVG-as-component imports (
import { ReactComponent as X }), and absolute imports via jsconfig/tsconfigbaseUrl— 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.envpolyfills 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:
- New file tree (
vite.config.js/tslocation,index.htmlmoved to root, entry point changes) - Every env var rename (
REACT_APP_FOO→VITE_FOO), listed explicitly, not just "rename the prefix" - Every import that needs rewriting (SVG imports, absolute path imports,
%PUBLIC_URL%references inindex.html) - Whether tests move to Vitest or stay on Jest, and why
- A rollback plan: keep the CRA setup on a branch/tag until the Vite build is verified in a real deploy, not just
vite buildsucceeding locally