PluginBench
Skill
Pass
Audit score 90

rsbuild-best-practices

rstackjs/agent-skills

Configure, review, and optimize Rsbuild applications with build, dev, and bundle best practices.

What is rsbuild-best-practices?

A reference guide for Rsbuild configuration, CLI usage, type checking, and bundle optimization. Use this when setting up, reviewing, or troubleshooting Rsbuild projects to ensure proper build setup, asset management, and performance.

  • Configure Rsbuild with rsbuild.config.ts and defineConfig patterns
  • Manage dev/build/preview CLI commands and inspect final configs
  • Integrate type checking via @rsbuild/plugin-type-check or tsc/vue-tsc
  • Optimize bundle size with dynamic imports and lightweight dependencies
  • Handle asset imports from source directories and public URL references
  • Debug config resolution and profiling with DEBUG and RSPACK_PROFILE flags

How to install rsbuild-best-practices

npx skills add https://github.com/rstackjs/agent-skills --skill rsbuild-best-practices
Claude Code
Cursor
Windsurf
Cline

How to use rsbuild-best-practices

  1. 1.Review the configuration section to ensure rsbuild.config.ts uses defineConfig and appropriate options
  2. 2.Run `rsbuild inspect` to verify final Rsbuild/Rspack configuration matches expectations
  3. 3.Set up type checking using @rsbuild/plugin-type-check or add tsc/vue-tsc as a script step
  4. 4.Apply bundle optimization: use dynamic import() for non-critical code and prefer lightweight libraries
  5. 5.Verify asset imports come from source directories, not public; reference public files by absolute URL
  6. 6.When debugging, run with DEBUG=rsbuild or use RSPACK_PROFILE=OVERVIEW for compiler bottleneck analysis

Use cases

Good for
  • Setting up a new Rsbuild project with proper TypeScript and multi-page configuration
  • Reviewing existing Rsbuild configs to align with best practices
  • Troubleshooting slow builds or large bundles using profiling and inspection tools
  • Integrating type checking into dev and production workflows
  • Migrating from Rsbuild v1 to v2 using updated documentation
Who it's for
  • Frontend engineers building with Rsbuild
  • DevOps/build engineers optimizing Rsbuild pipelines
  • Teams reviewing Rsbuild project configurations
  • Developers troubleshooting build performance or bundle size

rsbuild-best-practices FAQ

When should I use tools.rspack vs. first-class Rsbuild options?

Use tools.rspack or tools.bundlerChain only when no first-class Rsbuild option exists for your configuration need.

How do I check my final Rsbuild configuration?

Run `rsbuild inspect` to view the generated Rsbuild/Rspack configs, or read files in dist/.rsbuild instead of assuming config.

What's the difference between rsbuild build and rsbuild preview?

Use `rsbuild build` for production builds; use `rsbuild preview` only for local testing of production output.

Should I publish .map files to production?

No; do not publish .map files to public servers/CDNs when production source maps are enabled, as they expose source code.

Where can I find the latest Rsbuild documentation?

For v2, read http://rsbuild.rs/llms.txt; for v1, read http://v1.rsbuild.rs/llms.txt.

Full instructions (SKILL.md)

Source of truth, from rstackjs/agent-skills.


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