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.
npx skills add rstackjs/agent-skills --skill migrate-to-rsbuild -a claude-codeWhat 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-code2Manually: put the files in place
~/.claude/skills/migrate-to-rsbuild/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/migrate-to-rsbuild/
1Skills CLI (Vercel)
npx skills add rstackjs/agent-skills --skill migrate-to-rsbuild -a codex2Manually: put the files in place
.agents/skills/migrate-to-rsbuild/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add rstackjs/agent-skills --skill migrate-to-rsbuild -a cursor2Manually: put the files in place
.cursor/skills/migrate-to-rsbuild/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install rstackjs/agent-skills migrate-to-rsbuild2Manually: put the files in place
.github/skills/migrate-to-rsbuild/SKILL.md1Skills CLI (Vercel)
npx skills add rstackjs/agent-skills --skill migrate-to-rsbuild -a gemini-cli2Platform CLI
gemini skills install https://github.com/rstackjs/agent-skills --path skills/migrate-to-rsbuildManually: put the files in place
.devin/skills/migrate-to-rsbuild/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add rstackjs/agent-skills --skill migrate-to-rsbuild -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
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