Menü
Start Storybook server and list available stories
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| name | documentation_robotics_viewer-storybook |
| description | Start Storybook server and list available stories |
| user_invocable | true |
| args | ["start|build|list"] |
| generated | true |
| generation_timestamp | "2026-02-23T16:09:03.829Z" |
| generation_version | 2.0 |
| source_project | documentation_robotics_viewer |
| source_codebase_hash | 00a2f9723e9a7f64 |
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> and 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.
Sync OpenAPI specs and generate TypeScript types
Display architectural overview and critical file locations
Run Vite build and check bundle size
Build Docker image and run deployment checks
Show coding patterns for React Flow nodes, Zustand, and Tailwind
Run Playwright tests and Storybook validation