Ask Claude to Migrate Your Storybook Stories from CSF2 to CSF3

Storybook 8 uses CSF3 — if your stories are still in the older Template pattern, Claude can migrate your entire stories directory in one session.

claude "Migrate all .stories.tsx files in src/components/ from CSF2 to CSF3 format. Convert default export objects to use the satisfies Meta<> pattern, update Story types to use StoryObj<>, and remove the Template.bind({}) pattern throughout."

CSF3 is more concise — stories shrink significantly once you eliminate the verbose Template binding:

// Before (CSF2)
const Template: StoryFn<ButtonProps> = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = { variant: 'primary', children: 'Click me' };

// After (CSF3) — Claude rewrites every story like this
export const Primary: Story = {
  args: { variant: 'primary', children: 'Click me' },
};

Claude handles the trickier cases too — stories with custom decorators, those using render functions for complex setups, and stories that already have play functions all get migrated correctly.

To audit what needs updating first:

claude "Scan every .stories.tsx file in this project and list which ones still use CSF2 patterns. Group them by complexity: simple arg-only stories, stories with decorators, and stories with custom render functions."

Once Claude has the inventory, you can migrate in batches by complexity level, reviewing as you go.

For teams on Storybook 7 moving to 8, the migration also involves updating imports from @storybook/react — ask Claude to handle those at the same time:

claude "Migrate all stories to CSF3 and update any @storybook/react imports to use the new @storybook/react package paths for Storybook 8."

Migrating a full component library by hand takes days — Claude can audit, plan, and execute the whole migration in a single session.