rsbuild-best-practices — скилл для Claude Code: как установить
Задаёт правила настройки, проверки и отладки сборщика Rsbuild. Помогает настроить конфиг, оптимизировать бандл и выявить узкие места при компиляции.
npx skills add rstackjs/agent-skills --skill rsbuild-best-practices -a claude-codeЧто делает 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-code2Вручную: положить файлы
~/.claude/skills/rsbuild-best-practices/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/rsbuild-best-practices/
1Через Skills CLI (Vercel)
npx skills add rstackjs/agent-skills --skill rsbuild-best-practices -a codex2Вручную: положить файлы
.agents/skills/rsbuild-best-practices/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add rstackjs/agent-skills --skill rsbuild-best-practices -a cursor2Вручную: положить файлы
.cursor/skills/rsbuild-best-practices/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install rstackjs/agent-skills rsbuild-best-practices2Вручную: положить файлы
.github/skills/rsbuild-best-practices/SKILL.md1Через Skills CLI (Vercel)
npx skills add rstackjs/agent-skills --skill rsbuild-best-practices -a gemini-cli2Командой платформы
gemini skills install https://github.com/rstackjs/agent-skills --path skills/rsbuild-best-practicesВручную: положить файлы
.devin/skills/rsbuild-best-practices/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add rstackjs/agent-skills --skill rsbuild-best-practices -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора9
Похожие
Рядом в теме «Фронтенд и 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