add-story

To generate Storybook stories for React components automatically, use this Skill to produce .stories.tsx files complete with meta configurations, visual states, and play functions for interactive testing.

Automating Storybook story creation includes generating .stories.tsx files with meta configurations, comprehensive visual states, play functions for interaction tests, and a Given/When/Then test plan at the top of each file.

You need Storybook and @storybook/test installed to create interactive play functions, and you can optionally use MSW for API mocking to simulate network requests within your stories.

Yes, this Storybook story generator works with API mocking by optionally integrating MSW, allowing you to mock network requests and generate stories that cover component loading and error states.

Yes, you can generate visual test coverage for multiple UI component states such as default, disabled, and loading, by configuring the automated story files to cover various interactive scenarios.

The best way to add interaction tests to Storybook stories is by automating the generation of play functions within your .stories.tsx files, which directly test component click events and user interactions.