Skip to main content
skill CX Codex

migrate-to-rsbuild — Claude Code skill: what it does, how to install

A skill that migrates webpack, Vite, Create React App, and Vue CLI projects to Rsbuild. It rewrites build configs and validates dev servers before cleaning up old packages.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add rstackjs/agent-skills --skill migrate-to-rsbuild -a claude-code
Open on GitHub

What migrate-to-rsbuild does

This skill guides agents through migrating existing build setups to Rsbuild. It detects the source tooling automatically. By inspecting package.json scripts and files such as webpack.config.*, vite.config.*, or vue.config.*, the skill identifies whether the project uses webpack, Vite, CRA, or Vue CLI. It then pulls official Rsbuild migration guides to map legacy options to new configurations.

The workflow prioritizes non-destructive updates. The skill never modifies application runtime code unless explicitly told to do so. It establishes a baseline build first, then addresses custom behaviors. Legacy configuration files and dependencies stay untouched until both dev server and production build pass verification.

What it helps with

  • migrate Create React App or CRACO setups to Rsbuild
  • switch webpack or Vite builds to Rsbuild without manual config mapping
  • port Vue CLI applications to Rsbuild
  • test dev servers and production builds before removing legacy dependencies

Example prompts for the agent

  • Migrate this project from webpack to Rsbuild and test the build
  • Switch our Create React App setup to Rsbuild without modifying application code
  • Help me move from Vite to Rsbuild and delete legacy configs once dev server runs cleanly

How to install migrate-to-rsbuild

1Skills CLI (Vercel)

npx skills add rstackjs/agent-skills --skill migrate-to-rsbuild -a claude-code

2Manually: put the files in place

~/.claude/skills/migrate-to-rsbuild/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/migrate-to-rsbuild/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about migrate-to-rsbuild

How do I install migrate-to-rsbuild in Claude Code?

Run npx skills add rstackjs/agent-skills --skill migrate-to-rsbuild -a claude-code. The file will be saved to ~/.claude/skills/migrate-to-rsbuild/SKILL.md.

What does migrate-to-rsbuild do?

It detects whether a project runs on webpack, Vite, CRA, or Vue CLI and migrates the configuration to Rsbuild. The workflow relies on Rsbuild documentation and verifies the build before deleting old packages.

Does migrate-to-rsbuild modify application source code?

Under its default rules, the skill edits only build scripts and configuration files. It avoids touching application runtime code unless you explicitly request those changes.

Source text

SKILL.md · MIT
---
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.

© rstackjs · MIT · rstackjs/agent-skills

Similar skills

Everything for Frontend and UI →

From the same set13

rspress-best-practices A skill that gives the agent rules for Rspress v2 sites: config, navigation, MDX, assets, search and deployment. Useful once the docs exist and the agent edits them. CX Codex +1 538installs rspack-v2-upgrade Walks a Rspack 1.x project through the v2 upgrade: dependencies, config, build checks. Useful when a major bump is too fiddly to do by hand. CX Codex +1 515installs rspress-description-generator A skill that fills in the description frontmatter field on Rspress pages that lack one. Useful when the docs site has grown and meta descriptions are missing in places. CX Codex +1 498installs rsbuild-v2-upgrade Walks a Rsbuild 1.x project through the v2 migration: dependencies, config, breaking options. Useful when a major bump would otherwise eat an evening. CX Codex +1 476installs rsdoctor-analysis Evaluates Rspack and Webpack bundles from a local rsdoctor-data.json report. It ranks package duplicates, heavy modules, and tree-shaking leaks. CX Codex +1 450installs migrate-to-rstest Migrates Jest, Vitest, or Playwright Test suites to Rstest while keeping test discovery, assertions, mocks, snapshots, and coverage intact. For moving a runner without rewriting scenarios. CX Codex +1 420installs rspress-custom-theme A skill that walks your agent through Rspress v2 theme changes, from CSS variables up to replacing built-in components. CX Codex +1 408installs rspress-docs-generator Builds a new Rspress v2 docs site or updates existing documentation pages according to changes in source code and tests. CX Codex +1 306installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor