canvas-storybook

What problem does it solve?

Storybook setup and maintenance for Canvas-based React components can be tedious; this skill provides a structured, atomic-design driven workflow to generate, organize, and document stories across atoms, molecules, organisms, templates, pages, and tests, with autodocs and consistent conventions.

Core Features & Use Cases

• Atomic design structure: stories organized by atoms, molecules, organisms, templates, pages, and tests for clear, scalable documentation.
• Auto documentation alignment: auto-syncs story props with component.yml and enables autodocs for accurate, up-to-date references.
• Asset and placeholder handling: supports placeholder images and real assets via index.ts exports to streamline asset management.
• Consistent naming conventions: enforces kebab-case filenames and uniform story titles for reliable discovery and integration.
• Use cases: create or update Storybook stories to serve as living UI documentation and visual regression references during development.

Quick Start

Create a new canvas-storybook following the atomic design layout and verify in Storybook.