Storybook Rsbuild

Goal

Set up Storybook on Rsbuild, or migrate an existing Storybook to it. Factual mappings — version compatibility, package names, install commands, config conversion patterns — live in upstream docs at storybook.rsbuild.rs. This skill is an action router and a behavioral checklist; it does not duplicate the docs.

Principles (must follow)

1. Single source of truth is upstream. Fetch the relevant storybook.rsbuild.rs page for version tables, install commands, and config conversion patterns. Do not infer version pins or package names from training memory — the ecosystem moves faster than the model's prior.

2. Pin from the framework guide's Requirements table. Each framework guide page (e.g. https://storybook.rsbuild.rs/guide/framework/react) carries a Requirements section listing the canonical compatible version ranges — that is the authoritative source for version pins. For fresh setups, install the latest stable storybook major and the matching storybook-rsbuild major. Do not pin from version numbers you see in code snippets elsewhere; only the docs are authoritative.

3. Declare @rsbuild/core directly. storybook-<framework>-rsbuild lists @rsbuild/core as a peer dependency, but you must still add @rsbuild/core to the project's own devDependencies so version pins and lockfile audits remain unambiguous and a future framework-package release that drops the peer cannot silently break the build.

4. Migration is one task with two ordered phases — both required. Phase A: install the new framework package and update config; leave the old framework package, old builder package, and old webpackFinal / viteFinal blocks in place so Verification has a rollback path. Phase B: as soon as Verification passes, in the same task, remove the old framework package (e.g. @storybook/react-webpack5, @storybook/vue3-vite), the old builder package (e.g. @storybook/builder-webpack5, @storybook/builder-vite), and the old webpackFinal / viteFinal block. A migration that ends with both builders' framework packages still in package.json is incomplete — leaving them is the most common silent regression in this skill's evals. Phase A on its own is not a valid stopping point; if you ran Verification, you must also run cleanup.

5. Preserve addons; never silently drop. When migrating, webpack-only addons (e.g. @storybook/addon-styling-webpack) must either be passed through webpackAddons (so upstream auto-translation handles them) or replaced with the equivalent Rsbuild-native pipeline (@rsbuild/plugin-postcss, tools.postcss, etc.). A migration that removes a styling addon and produces a passing storybook build but a visually broken story tree is still a regression.

6. Operate in scope. In monorepos, modify only the package that hosts stories. Do not edit business source files unless the migration strictly requires it.