playbooks

home / skills / rstackjs / agent-skills / migrate-to-rsbuild

migrate-to-rsbuild skill

/skills/migrate-to-rsbuild

This skill helps migrate projects from webpack, Vite, CRA/CRACO, or Vue CLI to Rsbuild with minimal changes and validated results.

npx playbooks add skill rstackjs/agent-skills --skill migrate-to-rsbuild

Review the files below or copy the command above to add this skill to your agents.

Files (5)
SKILL.md
1.7 KB
---
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.

Overview

This skill automates and guides migration of webpack, Vite, Create React App (CRA/CRACO), or Vue CLI projects to Rsbuild with minimal behavioral changes and clear verification steps. It focuses on a smallest-change-first migration that preserves application runtime logic and provides a clear validation and cleanup workflow.

How this skill works

The skill detects the project’s original build tool by scanning package.json scripts/dependencies and well-known config files, then applies framework-specific deltas to produce an Rsbuild configuration. It runs the dev server and build commands to validate the migration, and reports remaining manual follow-ups. Old tool dependencies and configs are kept until Rsbuild is verified green, then removed.

When to use it

  • You maintain a project using webpack, Vite, CRA/CRACO, or Vue CLI and want to migrate to Rsbuild.
  • You need a predictable, minimal-impact migration that preserves runtime behavior.
  • You want automated detection and step-by-step validation for the migration.
  • You prefer keeping the old toolside-by-side until the new build is verified.
  • You need a documented summary of changed files and manual tasks after migration.

Best practices

  • Follow the official Rsbuild migration docs as the authoritative reference.
  • Apply the smallest reachable change first: prioritize baseline dev/build parity before customizations.
  • Do not modify application runtime code unless the user explicitly requests it.
  • Validate dev server and production build before removing legacy configs or deps.
  • Keep a concise summary of changed files and unresolved issues for manual follow-up.

Example use cases

  • Migrate a webpack-based React app to Rsbuild while keeping runtime code untouched.
  • Convert a Vite project to Rsbuild and verify the dev server and production build run cleanly.
  • Replace CRA/CRACO with Rsbuild in an existing React project, preserving scripts and behavior.
  • Move a Vue CLI project to Rsbuild, applying mappings for vue.config.js behaviors.
  • Perform a staged migration: enable Rsbuild, validate, then remove legacy build deps.

FAQ

Which source frameworks are supported?

webpack, Vite, CRA/CRACO, and Vue CLI are supported with framework-specific migration deltas.

Will this change my application runtime code?

No. The migration principle is not to change business logic; only build/config files are adjusted unless you request code changes.