storybook-guidelines

What problem does it solve?

Storybook story creation often lacks coverage for conditional rendering and can drift toward non-critical prop variations. This guide defines a concise set of rules to ensure UI stories demonstrate real state changes and predictable behavior.

Core Features & Use Cases

• Create stories for conditional rendering branches (e.g., elements shown/hidden by conditions).
• Keep Meta minimal and avoid barrel imports; use explicit imports with the project alias.
• Name stories in Japanese to make visual distinctions immediately clear and maintain consistency across components.
• Write in TypeScript with clear, inline documentation for maintainers.
• Provide examples and anti-patterns to prevent unnecessary variations and logic mocking.

Quick Start

Create a Storybook story file for a component that conditionally renders a header based on isVisible, with Japanese naming.