storybook-scaffolder

Storybook story scaffolding generates `.stories.tsx` files from your React components, including Meta and StoryObj boilerplate with design token imports. Provide your component file path, and the Skill creates a documented story template ready for variant definitions and interactive testing.

Yes. The Skill generates TypeScript story files with M3 design token imports prepended automatically. It extracts component names and paths intelligently, creating stories that document React components for development and QA with consistent styling.

Automated story scaffolding eliminates manual boilerplate repetition. Instead of writing each `.stories.tsx` file by hand, provide component paths and the Skill generates complete story templates with placeholder guidance for argTypes and args, accelerating your design system documentation.

The scaffolding creates story files with TODO comments marking where argTypes and args belong. You complete these interactive properties after generation, but the Skill handles path discovery, imports, and structural boilerplate automatically.

Intelligent path parsing extracts the component name, location, and story title directly from your provided component file path. This ensures consistent naming conventions across your Storybook without manual configuration.

Use this when creating new UI components and need isolated development, visual testing, and living documentation. It's essential for design system projects where consistent, rapid Storybook coverage accelerates QA and team collaboration.