Skills rsbuild

install

source · Clone the upstream repo

git clone https://github.com/TerminalSkills/skills

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/TerminalSkills/skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/rsbuild" ~/.claude/skills/terminalskills-skills-rsbuild && rm -rf "$T"

manifest: skills/rsbuild/SKILL.md

safety · automated scan (low risk)

This is a pattern-based risk scan, not a security review. Our crawler flagged:

references .env files

Always read a skill's source content before installing. Patterns alone don't mean the skill is malicious — but they warrant attention.

source content

Rsbuild — Rust-Powered Build Tool

You are an expert in Rsbuild, the Rspack-based build tool for web applications. You help developers configure fast builds for React, Vue, Svelte, and vanilla projects with Webpack-compatible plugin ecosystem, built-in TypeScript/CSS/asset support, module federation, and 5-10x faster builds than Webpack — providing a drop-in replacement that reuses existing Webpack loaders and plugins.

Core Capabilities

Configuration

// rsbuild.config.ts
import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";
import { pluginSass } from "@rsbuild/plugin-sass";
import { pluginTypeCheck } from "@rsbuild/plugin-type-check";

export default defineConfig({
  plugins: [
    pluginReact(),
    pluginSass(),
    pluginTypeCheck(),
  ],
  source: {
    entry: { index: "./src/index.tsx" },
    alias: { "@": "./src" },
  },
  output: {
    target: "web",
    distPath: { root: "dist" },
    polyfill: "usage",                    // Auto-polyfill based on browserslist
    cleanDistPath: true,
    assetPrefix: process.env.CDN_URL || "/",
  },
  html: {
    title: "My App",
    favicon: "./src/assets/favicon.ico",
    template: "./public/index.html",
  },
  server: {
    port: 3000,
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        changeOrigin: true,
      },
    },
  },
  performance: {
    chunkSplit: {
      strategy: "split-by-experience",    // Auto-split React, lodash, etc.
    },
    bundleAnalyze: process.env.ANALYZE === "true"
      ? { analyzerMode: "static" }
      : undefined,
  },
  tools: {
    // Use existing Webpack loaders
    rspack: (config) => {
      config.module?.rules?.push({
        test: /\.graphql$/,
        use: "graphql-tag/loader",
      });
    },
  },
});

Usage

# Create new project
npm create rsbuild@latest

# Development
npx rsbuild dev                           # HMR dev server

# Production build
npx rsbuild build                         # Optimized production bundle

# Preview
npx rsbuild preview                       # Serve production build locally

Installation

npm install -D @rsbuild/core @rsbuild/plugin-react

Best Practices

Webpack compatibility — Reuse existing Webpack loaders via
```
tools.rspack
```
; most plugins work without changes
Plugin system — Use official plugins for React, Vue, Svelte, Sass, Less, TypeScript; composable and fast
Auto code splitting —
```
split-by-experience
```
strategy auto-splits vendor libraries; optimal chunking out of box
Polyfill on demand — Set
```
polyfill: "usage"
```
with browserslist; only includes polyfills for target browsers
Module Federation — Built-in support for micro-frontends; share components between independently deployed apps
Type checking — Use
```
pluginTypeCheck()
```
for parallel TypeScript checking; doesn't slow down builds
Proxy for API — Configure dev server proxy; avoid CORS issues during development
5-10x faster — Rspack (Rust) core provides Webpack semantics at native speed; same configs, faster builds