skills.rest
AJV009
AJV009COMMUNITY
Explore all skills by this author →
Website𝕏@alphons009GitHub

canvas-storybook

Generate and organize React Canvas Storybook stories using atomic design structure.

1|Updated Mar 22, 2026
Search Tags:#documentation#react#canvas#storybook#ui-testing#atomic-design#component-docs
One-click install
npx skills add https://github.com/AJV009/drupal-devkit --skill canvas-storybook
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas-storybook
Source: https://github.com/AJV009/drupal-devkit/tree/main/plugins/drupal-canvas/skills/canvas-storybook
Command: npx skills add https://github.com/AJV009/drupal-devkit --skill canvas-storybook

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about canvas-storybook

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate Storybook stories for React Canvas components?▼

Generate React Canvas Storybook stories by organizing components into atoms, molecules, organisms, templates, pages, and tests. This structured workflow applies naming conventions and autodocs integration to deliver living UI documentation and visual regression references.

What is the best way to organize Storybook documentation using atomic design?▼

Organize Storybook documentation using atomic design by structuring stories across atoms, molecules, organisms, templates, and pages. This layout ensures clear, scalable documentation and enforces consistent kebab-case filenames for reliable component discovery.

How do I keep Storybook story props synced with component documentation?▼

Keep Storybook story props synced with component documentation by enabling autodocs and auto-syncing story arguments with component.yml. This ensures accurate, up-to-date references for React Canvas components during development.

Why should I avoid passing HTML strings in Storybook story arguments?▼

Avoid passing HTML in Storybook story arguments to ensure consistency and safety. Enforcing strict no-HTML policies in story arguments prevents injection risks and maintains clean, structured component documentation for Canvas projects.

How do I handle placeholder images and assets in Storybook stories?▼

Handle placeholder images and real assets in Storybook stories by using index.ts exports for asset management. This streamlines the integration of visual placeholders and real media into your React Canvas component documentation.

Does this Storybook setup support visual regression references for UI components?▼

Yes, this Storybook setup supports visual regression references for UI components. By generating structured stories with autodocs and consistent naming, it serves as living UI documentation for visual regression testing during development.

Related Skills

Explore More Software Engineering Skills→
AJV009AJV009
1

create-component

Scaffold React Canvas components with index.jsx, component.yml, and Storybook stories.

Community
Intermediate
hffmnnjhffmnnj
39

visual-regression

Compare screenshots pixel-by-pixel to detect unintended UI changes.

Community
Intermediate
Camilo8902Camilo8902

storybook-setup

Automate Storybook setup and configuration for React, Next.js, and Vue3 projects.

Community
Intermediate
alekspetrovalekspetrov
196

visual-regression

Automate visual-regression testing setup for Storybook components with CI workflows.

Community
Advanced