Start Storybook server and list available stories
Quick-reference skill for documentation_robotics_viewer Storybook operations.
/documentation_robotics_viewer-storybook [start|build|list]
Manage the Storybook component documentation system for the documentation_robotics_viewer project. This skill provides quick access to:
Storybook Configuration:
Meta<typeof Component>StoryObjsrc/catalog/decorators/ (e.g., withReactFlowDecorator)@storybook/test-runner with custom error filtering via tests/stories/storyErrorFilters.tsnpm run storybook:dev
Ctrl+C to stop the servernpm run storybook:build
storybook-static/Find all story files in the project:
# List all story files by category
find src/catalog -name "*.stories.tsx" | sort
# Count stories by directory
find src/catalog -name "*.stories.tsx" | xargs dirname | sort | uniq -c
# Show story test files
ls -la tests/stories/
Story Categories:
src/catalog/components/ - UI component storiestests/stories/:
architecture-nodes.spec.ts - Custom node stories (15+ node types)architecture-edges.spec.ts - Custom edge storiesgraph-views.spec.ts - Graph visualization storiesui-components.spec.ts - Flowbite UI component storieslayout-engines.spec.ts - Layout algorithm stories# Validate all 593 stories (smoke tests)
npm run test:storybook
# Run accessibility tests (WCAG 2.1 AA)
npm run test:storybook:a11y
/documentation_robotics_viewer-storybook start
Opens Storybook at http://localhost:61001 where you can:
/documentation_robotics_viewer-storybook build
Creates production-ready static files in storybook-static/ directory.
/documentation_robotics_viewer-storybook list
Sample output structure:
src/catalog/components/
├── nodes/
│ ├── GoalNode.stories.tsx
│ ├── StakeholderNode.stories.tsx
│ ├── BusinessFunctionNode.stories.tsx
│ └── ... (15+ node types)
├── edges/
│ ├── ElbowEdge.stories.tsx
│ └── SmartEdge.stories.tsx
├── graph/
│ ├── GraphViewer.stories.tsx
│ └── LayerGraphView.stories.tsx
└── ui/
├── Button.stories.tsx
├── Card.stories.tsx
└── ... (Flowbite components)
All stories follow CSF3 format with strict patterns:
import type { Meta, StoryObj } from '@storybook/react';
import { withReactFlowDecorator } from '@catalog/decorators/';
import { GoalNode } from '@core/nodes/motivation/GoalNode';
const meta: Meta<typeof GoalNode> = {
title: 'Architecture/Nodes/Motivation/Goal',
component: GoalNode,
decorators: [withReactFlowDecorator],
};
export default meta;
type Story = StoryObj<typeof GoalNode>;
export const Default: Story = {
args: {
data: {
label: 'Increase Revenue',
fill: '#E8F5E9',
stroke: '#4CAF50',
},
},
};
import { StoryLoadedWrapper } from '@catalog/providers/StoryLoadedWrapper';
export const BusinessLayer: Story = {
render: () => (
<ReactFlowProvider>
<StoryLoadedWrapper>
<GraphViewer nodes={nodes} edges={edges} />
</StoryLoadedWrapper>
</ReactFlowProvider>
),
};
Storybook stories are tested via:
Smoke Tests (npm run test:storybook)
@storybook/test-runner with PlaywrightAccessibility Tests (npm run test:storybook:a11y)
Visual Regression (via Chromatic or Percy - if configured)
.storybook/main.cjs - Storybook configuration.storybook/preview.tsx - Global decorators and providers.storybook/manager.ts - UI customization.storybook/test-runner.ts - Test runner configurationtests/stories/storyErrorFilters.ts - Custom error filteringsrc/catalog/decorators/ - Reusable decoratorssrc/catalog/components/ - All component storieslsof -i :61001 and kill conflicting processesrm -rf node_modules/.cache/storybooknpm ci*.stories.tsx (not .story.tsx)meta.titlestoryErrorFilters.tsThis skill was automatically generated from the documentation_robotics_viewer project on 2026-02-23.