storybook-rsbuild_skill

Overview

This skill sets up or migrates Storybook to use the Rsbuild builder for React, Vue 3, HTML, Web Components, and React Native Web. It detects current Storybook state, performs fresh installs or stepwise migrations from webpack5/Vite, and applies integrations for Rslib, Modern.js, and Rspack. The goal is a working Storybook dev and build using the rsbuild pipeline.

How this skill works

The skill scans package.json, lockfiles, and the .storybook directory (including per-package folders in monorepos) to detect framework, existing builder, and any ecosystem integrations. For fresh installs it selects the correct storybook-*-rsbuild package and applies the framework guide. For migrations it follows the upstream migration guide: detect migration type, resolve compatible versions, replace packages, update .storybook/main.*, migrate custom builder hooks, and verify the result. It respects integration overlays for Rslib, Modern.js, and Rspack when relevant.

When to use it

• Add Storybook with the Rsbuild builder to a new or existing project
• Migrate Storybook from webpack5 or Vite to the Rsbuild builder
• Configure rsbuildFinal or adjust builder-specific options in .storybook
• Integrate Storybook with Rslib, Modern.js, or Rspack constraints
• Operate within a monorepo and target a package that hosts stories

Best practices

• Run detection first: inspect package.json, lockfile, and .storybook to classify the scenario
• Follow the upstream framework and integration guides exactly for package names and config snippets
• Change only the packages required for migration and use the project’s package manager
• Verify dev and build (storybook dev, storybook build) and confirm rsbuild is active in logs
• If migration fails, isolate by removing custom rsbuildFinal temporarily and reintroduce incrementally

Example use cases

• Freshly add Storybook using storybook-react-rsbuild for a new React app
• Migrate an existing Storybook from @storybook/webpack5 to storybook-vue3-rsbuild in a Vue 3 project
• Integrate Storybook into a package that uses @rslib/core, applying Rslib-specific constraints
• Convert custom webpackFinal or viteFinal hooks into rsbuildFinal equivalents during migration
• Fix monorepo setups by locating the package with stories and configuring that package’s .storybook