Generate conformant CSF3 stories for React components with validation gates.
npx skills add https://github.com/strongeron/storybook-workbench --skill sb-stories
Please help me install this Agent Skill. Skill: sb-stories Source: https://github.com/strongeron/storybook-workbench/tree/main/skills/sb-stories Command: npx skills add https://github.com/strongeron/storybook-workbench --skill sb-stories
This skill solves the problem of inconsistent, manual, or broken Storybook story creation by providing a standardized, agent-driven workflow that ensures stories are conformant, maintainable, and properly wired to the project's design system.
Use the sb-stories skill to write a story for the Button component by following the guided prompts for state coverage and factory generation.
High-intent search queries and answers about installing and using this skill.
To generate CSF3 stories for React components, you can use an automated workflow that analyzes component prop shapes and state requirements. This ensures stories are conformant, maintainable, and properly wired to your project's design system.
Avoid Storybook story Cartesian explosion by authoring stories that cover only materially-different component states. This targeted state coverage prevents redundant combinations while ensuring comprehensive visual documentation.
Yes, automating Storybook story creation requires bash, python3, and Node.js. These dependencies are necessary to execute discovery scripts and validate story conformance against project-level design system tokens.
The best way to share mock data across Storybook stories is by scaffolding factories. When three or more stories share a data shape, factory-based mocking ensures consistent and reusable mock data structures.
Automated validation for Storybook CSF3 stories works by integrating a strict gate that checks stories against 13 deterministic rules. This validation ensures proper imports, layout, interaction testing, and CSS-check proofs for component rendering.
Storybook component stories fail design system token validation when they lack proper imports or fail strict conformance checks. Running automated validation scripts identifies these layout and interaction testing errors before Storybook integration.
strongeronAudit React and Vite codebases for design system inconsistencies via static analysis.
matthewharwoodRun Playwright tests against Storybook stories in iframes and validate IndexedDB state.
TheBushidoCollectiveCreate CSF3 Storybook stories with TypeScript-typed Meta and StoryObj.
hypeJunctionGenerates TypeScript test files with visual states and interaction tests for Storybook components.
