storybook-rsbuild

Name: storybook-rsbuild
Author: rstackjs

84stars1forks

How to install storybook-rsbuild?

rstackjs/agent-skills/storybook-rsbuild

$npx -y skills add rstackjs/agent-skills --skill storybook-rsbuild

Installs into the current project.

Summary

Set up or migrate Storybook to use the Rsbuild builder. Handles fresh setup for React, Vue 3, HTML, Web Components, and React Native Web, migration from webpack5 or Vite frameworks, and integrations with Rslib, Modern.js, and Rspack. Use when asked to add Storybook, migrate Story

Files · 1

View on GitHub

SKILL.md

1	# Storybook Rsbuild
2
3	## Goal
4
5	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.
6
7	## Principles (must follow)
8
9	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.
10
11	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.
12
13	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.
14
15	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](#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.
16
17	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.
18
19	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.
20
21	## Step 1 — Detect scenario
22
23	Read `package.json` and project structure to determine existing Storybook state:
24
25	1. Check for `.storybook/` directory (in monorepos, check both root and per-package)
26	2. Check `package.json` for `storybook` scripts or `@storybook/` / `storybook--rsbuild` in dependencies or devDependencies
27	3. If Storybook exists *and already uses `storybook--rsbuild`** → already set up; go to [Configuration](#configuration) or [Troubleshooting](#troubleshooting) as needed
28	4. If Storybook exists with a non-Rsbuild builder (`@storybook/-webpack5`, `@storybook/-vite`, etc.) → go to [Migration Workflow](#migration-workflow)
29	5. No Storybook found → go to [Fresh Setup Workflow](#fresh-setup-workflow)
30
31	---
32
33	## Fresh Setup Workflow
34
35	### 1. Detect ecosystem integration
36
37	Read `package.json` dependencies and devDependencies, check in order:
38
39	\| Signal \| Ecosystem \| Integration guide \|
40	\| -------------------------------------- \| ----------- \| -------------------------------------------------------- \|
41	\| `@rslib/core` \| Rslib \| https://storybook.rsbuild.rs/guide/integrations/rslib \|
42	\| `@modern-js/app-tools` \| Modern.js \| https://storybook.rsbuild.rs/guide/integrations/modernjs \|
43	\| `@rspack/core` without `@rsbuild/core` \| Pure Rspack \| https://storybook.rsbuild.rs/guide/integrations/rspack \|
44
45	If matched, read the integration guide and apply its constraints as an overlay alongs

People who liked this also viewed

6 picks

Type

storybook-rsbuild

84stars1forks

View on GitHub

How to install storybook-rsbuild?

rstackjs/agent-skills/storybook-rsbuild

$npx -y skills add rstackjs/agent-skills --skill storybook-rsbuild

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Storybook Rsbuild
2
3	## Goal
4
5	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.
6
7	## Principles (must follow)
8
9	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.
10
11	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.
12
13	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.
14
15	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](#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.
16
17	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.
18
19	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.
20
21	## Step 1 — Detect scenario
22
23	Read `package.json` and project structure to determine existing Storybook state:
24
25	1. Check for `.storybook/` directory (in monorepos, check both root and per-package)
26	2. Check `package.json` for `storybook` scripts or `@storybook/` / `storybook--rsbuild` in dependencies or devDependencies
27	3. If Storybook exists *and already uses `storybook--rsbuild`** → already set up; go to [Configuration](#configuration) or [Troubleshooting](#troubleshooting) as needed
28	4. If Storybook exists with a non-Rsbuild builder (`@storybook/-webpack5`, `@storybook/-vite`, etc.) → go to [Migration Workflow](#migration-workflow)
29	5. No Storybook found → go to [Fresh Setup Workflow](#fresh-setup-workflow)
30
31	---
32
33	## Fresh Setup Workflow
34
35	### 1. Detect ecosystem integration
36
37	Read `package.json` dependencies and devDependencies, check in order:
38
39	\| Signal \| Ecosystem \| Integration guide \|
40	\| -------------------------------------- \| ----------- \| -------------------------------------------------------- \|
41	\| `@rslib/core` \| Rslib \| https://storybook.rsbuild.rs/guide/integrations/rslib \|
42	\| `@modern-js/app-tools` \| Modern.js \| https://storybook.rsbuild.rs/guide/integrations/modernjs \|
43	\| `@rspack/core` without `@rsbuild/core` \| Pure Rspack \| https://storybook.rsbuild.rs/guide/integrations/rspack \|
44
45	If matched, read the integration guide and apply its constraints as an overlay alongs

People who liked this also viewed

6 picks

Type