storybook-configuration

Configure Storybook by defining `.storybook/main.ts` with your framework, builder (Vite or Webpack), and story patterns, then set up `.storybook/preview.ts` with global decorators and parameters. This Skill automates framework-specific setup for React-Vite, Next.js, and Webpack projects to enable streamlined story discovery and visualization.

Enable essential addons like `addon-essentials`, `addon-interactions`, and `addon-a11y` by listing them in your main configuration file. Each addon enhances functionality—interactions enable testing, a11y runs accessibility checks on stories, and essentials provide core UI controls and documentation features.

Storybook supports framework-specific builders; you configure either Webpack or Vite in `.storybook/main.ts` based on your project's build system. This Skill covers setup for both builders, allowing you to choose the one matching your project's framework and tooling.

Enable autodocs and define global parameters in `.storybook/preview.ts` to set rendering defaults, decorators, and documentation behavior across all stories. This ensures consistent story discovery, visualization, and automated documentation generation without per-story configuration.

Main configuration (`.storybook/main.ts`) defines core settings like framework, builder, story patterns, and addons; preview configuration (`.storybook/preview.ts`) sets global rendering parameters, decorators, and documentation settings. Together they establish your complete development environment.

Yes—Next.js requires framework-specific presets and builder configuration in main.ts to integrate with Next.js tooling, while React-Vite uses Vite's builder. This Skill provides tailored setup steps for each framework to ensure seamless integration with your project's build system.