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

rsbuild-best-practices — скилл для Claude Code: как установить

Задаёт правила настройки, проверки и отладки сборщика Rsbuild. Помогает настроить конфиг, оптимизировать бандл и выявить узкие места при компиляции.

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

Что делает rsbuild-best-practices

Скилл направляет агента при работе с конфигурацией rsbuild.config.ts через функцию defineConfig. Вмешательство через tools.rspack или tools.bundlerChain легко ломает встроенные механизмы сборщика, поэтому скилл допускает низкоуровневые хуки только при отсутствии штатных опций. Для многостраничных проектов предписывается явно задавать source.entry, а пути в TypeScript брать из tsconfig.json.

Правила регламентируют проверку типов, ассеты и безопасность. Проверка выносится в @rsbuild/plugin-type-check либо запускается отдельно через tsc --noEmit или vue-tsc --noEmit. Исходные ассеты импортируются прямо из каталогов исходного кода, а не из папки public. При создании production-сборки действует строгое ограничение: файлы .map нельзя выкладывать на публичные серверы или CDN.

Отладка опирается на подтверждённые данные, а не догадки. Агент изучает итоговый конфиг в каталоге dist/.rsbuild и включает флаг DEBUG=rsbuild. Если нужно найти причину долгой компиляции, скилл требует запускать профилирование с переменной окружения RSPACK_PROFILE=OVERVIEW.

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

  • настроить rsbuild.config.ts без лишних вызовов tools.rspack
  • проверить финальный конфиг Rspack в каталоге dist/.rsbuild
  • настроить проверку типов через @rsbuild/plugin-type-check
  • оптимизировать размер бандла с помощью динамических импортов
  • найти узкие места компилятора через RSPACK_PROFILE=OVERVIEW

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

  • Проверь мой rsbuild.config.ts и настрой правильную точку входа для многостраничного приложения.
  • Как включить отладку резолва конфига в Rsbuild через DEBUG=rsbuild?
  • Помоги настроить профилирование компилятора Rspack и оптимизировать размер бандла.

Как установить rsbuild-best-practices

1Через Skills CLI (Vercel)

npx skills add rstackjs/agent-skills --skill rsbuild-best-practices -a claude-code

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

~/.claude/skills/rsbuild-best-practices/SKILL.md

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

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

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

rstest-best-practices Правила настройки и написания тестов Rstest: окружения, моки, снапшоты, покрытие и CI. Пригодится, когда проект переезжает на Rstest или тесты уже есть, но разъехались по стилю. CX Codex +1 1 400установок rslib-best-practices Скилл обучает агента правилам сборки библиотек на Rslib. Пригодится при настройке rslib.config.ts, разделении зависимостей и выводе деклараций. CX Codex +1 1 000установок 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установок migrate-to-rstest Переносит тесты из Jest, Vitest или Playwright Test в Rstest, сохраняя обнаружение, ассерты, моки, снапшоты и покрытие. Пригодится, когда надо переехать без переписывания сценариев. CX Codex +1 420установок rspress-custom-theme Скилл подсказывает агенту, как менять тему Rspress v2: от CSS-переменных до замены встроенных компонентов. CX Codex +1 408установок

Похожие

rspeedy-bundle-size lynx-community Скилл разбирает, из чего складывается вес .lynx.bundle в rspeedy/ReactLynx, и подсказывает, за какой рычаг тянуть первым. CX Codex +1 458установок check-bin-obj-clash dotnet Находит конфликты путей OutputPath и IntermediateOutputPath в проектах MSBuild. Пригодится при сбоях параллельной сборки и ошибках блокировки файлов. CX Codex +1 3 400установок kotlin-tooling-kotlin-toolchain github:@singleton11 Скилл учит агента работать с Kotlin Toolchain — единым CLI JetBrains вместо Gradle-скриптов. Пригодится, если в репозитории лежат project.yaml и module.yaml. CX Codex +1 449установок kotlin-tooling-gradle-to-kotlin-toolchain-project github:@singleton11 Пошагово переводит проект с Gradle на Kotlin Toolchain: переносит зависимости, заменяет плагины и правит CI. Пригодится при полной миграции репозитория без изменения бизнес-логики. CX Codex +1 426установок tooling-engineer VoltAgent Community Проектирует и пишет CLI-утилиты, генераторы кода, плагины для IDE и сборочные скрипты. Пригодится, когда нужно автоматизировать рутину разработчиков внутри команды. 257установок vue-best-practices github.com/vuejs-ai Задаёт стандарты разработки на Vue 3 с Composition API и TypeScript. Пригодится при написании SFC-компонентов, composables и настройке реактивности. CX Codex +1 42 900установок

Рядом в теме «Фронтенд и UI»

Всё по теме «Фронтенд и UI» →

Вопросы о rsbuild-best-practices

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

Для установки выполните команду npx skills add rstackjs/agent-skills --skill rsbuild-best-practices -a claude-code. Файл навыка сохранится в ~/.claude/skills/rsbuild-best-practices/SKILL.md.

Что делает скилл rsbuild-best-practices?

Скилл передаёт агенту стандарты конфигурирования, оптимизации и профилирования проектов на Rsbuild. Он предотвращает ошибки при работе со статикой, проверкой типов и исходными картами.

Как скилл предлагает диагностировать проблемы со сборкой?

Правила предписывают запускать команду с переменной DEBUG=rsbuild и анализировать сгенерированные файлы в папке dist/.rsbuild. Для анализа задержек компилятора используется RSPACK_PROFILE=OVERVIEW.

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

SKILL.md · MIT
---
name: rsbuild-best-practices
description: Configure, review, or troubleshoot Rsbuild applications, including build/dev commands, assets, type checking, and bundle optimization.
---

# Rsbuild best practices

Apply these rules when writing or reviewing Rsbuild projects.

## Configuration

- Use `rsbuild.config.ts` and `defineConfig`
- Use `tools.rspack` or `tools.bundlerChain` only when no first-class Rsbuild option exists
- Define explicit `source.entry` values for multi-page applications
- In TypeScript projects, prefer `tsconfig.json` path aliases first

## CLI

- Use `rsbuild` for local development
- Use `rsbuild build` for production build
- Use `rsbuild preview` only for local production preview
- Use `rsbuild inspect` to inspect final Rsbuild/Rspack configs

## Type checking

- Use `@rsbuild/plugin-type-check` for integrated dev/build type checks
- Or run `tsc --noEmit`/`vue-tsc --noEmit` as an explicit script step

## Bundle size optimization

- Prefer dynamic `import()` for non-critical code paths
- Prefer lightweight libraries where possible
- Keep browserslist aligned with real compatibility requirements

## Asset management

- Import source-managed assets from project source directories, not from `public`
- Reference `public` files by absolute URL path

## Security

- Do not publish `.map` files to public servers/CDNs when production source maps are enabled

## Debugging

- Run with `DEBUG=rsbuild` when diagnosing config resolution or plugin behavior
- Read generated files in `dist/.rsbuild` to confirm final config, not assumed config

## Profiling

- Use Node CPU profiling (`--cpu-prof`) when JavaScript-side overhead is suspected
- Use `RSPACK_PROFILE=OVERVIEW` and analyze trace output for compiler-phase bottlenecks

## Documentation

- For the latest (v2) docs, read http://rsbuild.rs/llms.txt
- For Rsbuild v1 docs, read http://v1.rsbuild.rs/llms.txt

© rstackjs · MIT · rstackjs/agent-skills

Смотрите также

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

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