К основному содержанию
скилл CX Codex

migrate-to-rsbuild — скилл для Claude Code: что делает и установка

Скилл переводит фронтенд-проекты с webpack, Vite, Create React App и Vue CLI на сборщик Rsbuild. Он пошагово заменяет конфигурацию и проверяет запуск перед удалением старых пакетов.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add rstackjs/agent-skills --skill migrate-to-rsbuild -a claude-code
Открыть на GitHub

Что делает migrate-to-rsbuild

Скилл автоматизирует перенос сборки на Rsbuild с четырёх платформ: webpack, Vite, CRACO или Vue CLI. Инструмент определяется автоматически. Ассистент проверяет зависимости в package.json и находит файлы конфигураций вроде webpack.config.* или vite.config.*. Затем он применяет справочные правила миграции для найденного фреймворка.

Работа идёт небольшими шагами. Скилл не трогает код самого приложения без прямой просьбы, поэтому логика компонентов останется нетронутой. Сначала переносится базовая конфигурация сборки. Только после этого агент настраивает кастомное поведение. Старые пакеты и конфиги удаляются в последнюю очередь, когда dev-сервер и сборка успешно прошли проверку.

Какие задачи решает

  • перенести конфигурацию с Create React App или CRACO на Rsbuild
  • переключить проект с webpack или Vite без ручного переписывания конфигов
  • адаптировать сборку Vue CLI под архитектуру Rsbuild
  • проверить запуск dev-сервера и сборку перед удалением старых зависимостей

Примеры запросов агенту

  • «Переведи этот проект с webpack на Rsbuild и проверь сборку»
  • «Мигрируй приложение с Create React App на Rsbuild, не меняя код компонентов»
  • «Помоги перейти с Vite на Rsbuild и удали старый конфиг после успешного запуска»

Как установить migrate-to-rsbuild

1Через Skills CLI (Vercel)

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

2Вручную: положить файлы

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

Папка скилла целиком; для одного проекта — .claude/skills/migrate-to-rsbuild/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о migrate-to-rsbuild

Как установить migrate-to-rsbuild в Claude Code?

Выполните команду npx skills add rstackjs/agent-skills --skill migrate-to-rsbuild -a claude-code. Инструкция сохранится в файле ~/.claude/skills/migrate-to-rsbuild/SKILL.md.

Что делает migrate-to-rsbuild?

Скилл находит текущий сборщик (webpack, Vite, CRA или Vue CLI) и переносит его параметры на Rsbuild по официальным руководствам. Старые зависимости остаются в проекте до подтверждения работоспособности.

Изменяет ли скилл код самого веб-приложения?

По базовым правилам скилл правит исключительно скрипты сборки и файлы конфигурации. Исходный код приложения затрагивается только тогда, когда вы прямо попросите об этом агента.

Исходный текст

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

Похожие скиллы

Всё по теме «Фронтенд и UI» →
frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок hyperframes heygen-com Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта. CX Codex +1 1 200 000установок hyperframes-cli heygen-com Управляет проектами HyperFrames через терминал: собирает таймлайн, проверяет контраст кадров, запускает предпросмотр и рендерит видео локально или в облаке. CX Codex +1 1 300 000установок webapp-testing официальный anthropics Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера. 186 758установок

Из того же набора13

rspress-best-practices Скилл задаёт агенту правила для сайтов на Rspress v2: конфигурация, навигация, MDX, ассеты, поиск и деплой. Пригодится, когда документация уже есть, а агент пишет по ней код. CX Codex +1 538установок rspack-v2-upgrade Ведёт проект с Rspack 1.x через переход на вторую версию: зависимости, конфиг, проверка сборки. Пригодится, когда мажорный апгрейд страшно начинать вручную. CX Codex +1 515установок rspress-description-generator Скилл дописывает поле description во frontmatter страниц Rspress, если его там нет. Пригодится, когда документация уже большая, а метаописания заполнены вручную через одну. CX Codex +1 498установок rsbuild-v2-upgrade Проводит проект с Rsbuild 1.x через миграцию на v2: зависимости, конфиг, сломанные опции. Пригодится, когда мажорное обновление иначе растянется на вечер. CX Codex +1 476установок rsdoctor-analysis Анализирует отчёты сборки Rspack и Webpack из файла rsdoctor-data.json. Находит дубликаты пакетов, раздутые модули и проблемы с tree-shaking. CX Codex +1 450установок migrate-to-rstest Переносит тесты из Jest, Vitest или Playwright Test в Rstest, сохраняя обнаружение, ассерты, моки, снапшоты и покрытие. Пригодится, когда надо переехать без переписывания сценариев. CX Codex +1 420установок rspress-custom-theme Скилл подсказывает агенту, как менять тему Rspress v2: от CSS-переменных до замены встроенных компонентов. CX Codex +1 408установок rspress-docs-generator Разворачивает сайт документации на Rspress v2 или обновляет существующие страницы под изменения в коде, тестах и API. CX Codex +1 306установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой