skills/rspack-best-practices/SKILL.md
Rspack best practices for config, CLI workflow, type checking, CSS, bundle optimization, assets and profiling. Use when writing, reviewing, or troubleshooting Rspack projects.
npx skillsauth add rstackjs/agent-skills rspack-best-practicesInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Apply these rules when writing or reviewing Rspack projects.
rspack.config.ts and defineConfigentry values for multi-page applicationsprocess.env.NODE_ENV only when neededtest, include, exclude, resourceQuery)If @rspack/cli is installed:
rspack dev for local developmentrspack build for production buildrspack preview only for local production previewts-checker-rspack-plugin for integrated dev/build type checkstsc --noEmit/vue-tsc --noEmit as an explicit script stepChoose one strategy:
type: 'css' | 'css/auto' | 'css/module') for modern setupscss-loader + CssExtractRspackPlugin for webpack migration compatibilitystyle-loader for pure style-in-JS runtime injection scenariosOptional:
builtin:lightningcss-loader when goals are syntax downgrade + vendor prefixingsass-loader/less-loader for preprocessing Sass/Less files@tailwindcss/webpack for Tailwind CSS integrationimport() for non-critical code pathstarget aligned with real compatibility requirementspublicpublic files by absolute URL pathasset, asset/resource, asset/inline, asset/source) over legacy file-loader/url-loader/raw-loader--cpu-prof) when JavaScript-side overhead is suspectedRSPACK_PROFILE=OVERVIEW and analyze trace output for compiler-phase bottlenecksbabel-loader, PostCSS, terser) with Rspack built-ins when feasible.map files to public servers/CDNs when production source maps are enableddevelopment
Customize Rspress themes using CSS variables, Layout slots, component wrapping, or component ejection. Use when a user wants to change the look and feel of an Rspress site, override theme components, add custom navigation/sidebar/footer content, inject global providers, or modify the default Rspress theme in any way. Also use when a user mentions theme/index.tsx, Layout slots, BEM class overrides, or rspress eject.
development
Debug Rstest issues systematically, including performance regressions. First determine whether the slowdown is in build startup or test execution, then run controlled config or code experiments and compare before/after timings.
development
Opinionated Rslib recommendations for modern JS/TS npm package design covering pure ESM, strict TypeScript, explicit exports, small stable APIs, pragmatic dependencies, accurate sideEffects, correct declarations, package validation, provenance, README.md, and AGENTS.md. Use when the user wants to make a JS/TS package more modern, check whether the current package setup is healthy, review package.json/exports/types/dependencies/docs/release readiness, or apply a modern library baseline.
development
Create or update draft GitHub releases for the current project's main GitHub repository, then organize GitHub-generated release notes into user-friendly sections without rewriting release note items. Use for preparing, formatting, categorizing, creating, or updating GitHub release notes or draft releases, including optional highlights when the user asks for them.