oms-storybook-react-vite

Overview

Storybook v10 consolidates what used to be ~40 separate @storybook/* packages into a single published storybook package exposing 40 subpath exports (including ./internal/*). This skill grounds Claude in that consolidated import surface so it stops generating outdated @storybook/addon-actions, @storybook/test, @storybook/preview-api imports that training data still shows.

• Scope: day-90+ story author on a Storybook 10.3+ React+Vite project. Not a setup/install guide — .storybook/main.ts framework pick and addon registration are edited quarterly and covered by the official upgrade CLI.
• Packages covered: storybook (core, 40 subpaths), @storybook/react-vite (framework), @storybook/react (renderer), @storybook/builder-vite (builder), @storybook/addon-{a11y,docs,themes,vitest}.
• Layer model: @storybook/react-vite (framework) composes @storybook/react (renderer) + @storybook/builder-vite (builder). Defects go in the correct layer.
• Source: github.com/storybookjs/storybook @ tag v10.3.5 (commit e486d382). [AST:code/frameworks/react-vite/src/preset.ts:L1] [AST:code/core/package.json:L48]

Quick Start

Preflight — ALWAYS do this first. Before writing any Storybook code, read the user's project state to ground your answer:

cat .storybook/main.ts   # installed version, registered addons, framework in use
cat .storybook/preview.ts # parameters, decorators, globalTypes already set
cat package.json | grep -E '"storybook"|"@storybook/'  # resolved versions

If the user's storybook dep is <10.0.0, STOP and tell them — CSF3 + v10 imports below will not apply. [EXT:https://storybook.js.org/docs/get-started/frameworks/react-vite/]

Write a CSF3 story (the canonical v10 pattern):

// Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react-vite';
import { fn, expect } from 'storybook/test';
import { Button } from './Button';

const meta = {
  component: Button,
  args: { onClick: fn() },
  tags: ['autodocs'],
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: { label: 'Click me', variant: 'primary' },
};

export const Clicked: Story = {
  args: { label: 'Click me' },
  play: async ({ canvas, userEvent, args }) => {
    const button = canvas.getByRole('button', { name: /click me/i });
    await userEvent.click(button);
    await expect(args.onClick).toHaveBeenCalled();
  },
};