storybook-guidelines

Storybook stories for conditional rendering should explicitly branch into Default, ErrorState, Loading, and NotLoggedIn variants to showcase meaningful visual differences rather than simple prop changes. This approach ensures visual testing focuses on impactful UI variations and avoids duplicate stories.

Common Storybook anti-patterns include creating unnecessary story variants from simple prop differences instead of focusing on conditional UI branches. The guidelines provide reference patterns with a story-patterns.md document to help teams avoid these duplicates and maintain meaningful visual testing coverage.

Minimal Meta configuration in Storybook requires defining only essential metadata fields to standardize story creation. This establishes clear rules for exercising conditional rendering states like error, loading, and authentication, ensuring visual regression testing captures meaningful UI variations across components.

You should create separate Storybook stories when components have conditional rendering branches for error, loading, or authentication states that produce visually distinct UI. Omit variants that only differ by simple prop values, as these create duplicates that dilute visual testing focus without adding meaningful coverage.

Yes, Japanese naming conventions are supported within the Storybook story creation guidelines. The skill defines standard practices that accommodate Japanese naming while enforcing consistent visual testing patterns, minimal Meta configuration, and documented anti-patterns across project teams.

Documenting Storybook story patterns across projects requires a reference structure with a story-patterns.md file that captures naming conventions, minimal Meta guidance, and anti-patterns. This enables teams to audit components for conditional UI branches and maintain consistent visual testing standards throughout development.