migrate-to-rsbuild
$
npx mdskill add rstackjs/agent-skills/migrate-to-rsbuildMigrates webpack, Vite, CRA, or Vue CLI projects to Rsbuild with minimal changes and clear validation.
- Helps developers transition from legacy build tools to Rsbuild while preserving project behavior.
- Integrates with package.json and config files to detect source frameworks like webpack or Vite.
- Follows official Rsbuild guides and prioritizes smallest changes before custom adjustments.
- Presents results by verifying dev server and build commands, keeping old dependencies temporarily.
SKILL.md
.github/skills/migrate-to-rsbuildView on GitHub ↗
---
name: migrate-to-rsbuild
description: Migrate webpack, Vite, create-react-app (CRA/CRACO), or Vue CLI projects to Rsbuild.
---
# Migrate to Rsbuild
## Goal
Migrate webpack, Vite, create-react-app (CRA/CRACO), or Vue CLI projects to Rsbuild with minimal behavior changes and clear verification.
## Supported source frameworks
- webpack
- Vite
- CRA / CRACO
- Vue CLI
## Migration principles (must follow)
1. **Official guide first**: treat Rsbuild migration docs as source of truth.
2. **Smallest-change-first**: complete baseline migration first, then migrate custom behavior.
3. **Do not change business logic**: avoid touching app runtime code unless user explicitly asks.
4. **Validate before cleanup**: keep old tool dependencies/config temporarily if needed; remove only after Rsbuild is green.
## Workflow
1. **Detect source framework**
- Check `package.json` dependencies/scripts and config files:
- webpack: `webpack.config.*`
- Vite: `vite.config.*`
- CRA/CRACO: `react-scripts`, `@craco/craco`, `craco.config.*`
- Vue CLI: `@vue/cli-service`, `vue.config.*`
2. **Apply framework-specific deltas**
- webpack: `references/webpack.md`
- Vite: `references/vite.md`
- CRA/CRACO: `references/cra.md`
- Vue CLI: `references/vue-cli.md`
3. **Validate behavior**
- Run dev server to verify the project starts without errors.
- Run build command to verify the project builds successfully.
- If issues remain, compare the old project configuration with the migration guide and complete any missing mappings.
4. **Cleanup and summarize**
- Remove obsolete dependencies/config only after validation passes.
- Summarize changed files and any remaining manual follow-ups.
More from rstackjs/agent-skills
- migrate-to-rslibMigrate tsc or tsup library projects to Rslib.
- migrate-to-rstestMigrate Jest or Vitest test suites and configs to Rstest. Use when asked to move from Jest/Vitest to Rstest, replace framework APIs with `@rstest/core`, translate test config to `rstest.config.ts`, or update test scripts and setup files for Rstest equivalents.
- pr-creatorUse when asked to create a pull request for this repository. It helps the PR follow the repository's branch safety rules, title convention, pull request template, and concise English writing style.
- rsbuild-best-practicesRsbuild best practices for config, CLI workflow, type checking, bundle optimization, assets, and debugging. Use when writing, reviewing, or troubleshooting Rsbuild projects.
- rsbuild-v2-upgradeUse when upgrading a Rsbuild 1.x project to v2, including dependency and configuration updates.
- rsdoctor-analysisUse when analyzing Rspack/Webpack bundles from local `rsdoctor-data.json` and producing evidence-based optimization recommendations.
- rslib-best-practicesRslib best practices for config, CLI workflow, output, declaration files, dependency handling, build optimization and toolchain integration. Use when writing, reviewing, or troubleshooting Rslib projects.
- rspack-best-practicesRspack best practices for config, CLI workflow, type checking, CSS, bundle optimization, assets and profiling. Use when writing, reviewing, or troubleshooting Rspack projects.
- rspack-debuggingHelps Rspack users and developers debug crashes or deadlocks/hangs in the Rspack build process using LLDB. Use this Skill when users encounter "Segmentation fault" errors during Rspack builds or when the build progress gets stuck.
- rspack-split-chunks>-