메뉴
Run Playwright tests and Storybook validation
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Start Storybook server and list available stories
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
| name | documentation_robotics_viewer-test |
| description | Run Playwright tests and Storybook validation |
| user_invocable | true |
| args | ["unit|integration|e2e|storybook|accessibility"] |
| generated | true |
| generation_timestamp | "2026-02-23T16:06:55.291Z" |
| generation_version | 2.0 |
| source_project | documentation_robotics_viewer |
| source_codebase_hash | 00a2f9723e9a7f64 |
Quick-reference skill for running Playwright tests and Storybook validation in the documentation_robotics_viewer project.
/documentation_robotics_viewer-test [unit|integration|e2e|storybook|accessibility]
Executes the comprehensive test suite for the React Flow-based architecture visualization tool. The project uses Playwright 1.57.0 as the test framework across all test types:
npm test
tests/unit/ and tests/integration/@playwright/test)Run specific file:
npm test -- tests/unit/services/nodeTransformer.spec.ts
npm test -- tests/integration/
npm run test:e2e # Headless mode (CI/CD)
npm run test:e2e:headed # Visible browser (debugging)
npm run server:dev)embedded-*.spec.ts, c4-*.spec.tsnpm run test:storybook
tests/stories/storyErrorFilters.tstests/stories/architecture-nodes.spec.ts - Node componentstests/stories/architecture-edges.spec.ts - Edge componentstests/stories/graph-views.spec.ts - Graph visualizationsStart Storybook dev server:
npm run storybook:dev
npm run test:storybook:a11y
Manual review in Storybook:
npm run storybook:dev/documentation_robotics_viewer-test unit
Executes: npm test (1170 tests, ~10s)
/documentation_robotics_viewer-test e2e
Executes: npm run test:e2e:headed (visible browser for debugging)
/documentation_robotics_viewer-test storybook
Executes: npm run test:storybook (578 stories across 97 files)
/documentation_robotics_viewer-test accessibility
Executes: npm run test:storybook:a11y (WCAG 2.1 AA validation)
After skill completes, you can drill down:
npm test -- tests/unit/nodes/BusinessFunctionNode.spec.ts
tests/
├── unit/ # Services, utilities, nodes, hooks, layout engines, stores
├── integration/ # Cross-component data flow (parsers → stores → transformers)
├── stories/ # Story validation (architecture-nodes, architecture-edges, etc.)
├── helpers/ # Test utilities and factories
├── fixtures/ # Test data (YAML models, JSON schemas)
└── *.spec.ts # E2E tests (embedded-graph.spec.ts, c4-diagram.spec.ts)
.storybook/
├── main.cjs # Storybook configuration
├── preview.tsx # Global decorators and providers
├── manager.ts # UI customization
└── test-runner.ts # Test runner with custom error filtering
All tests use Playwright:
import { test, expect } from '@playwright/test';
Graph stories use StoryLoadedWrapper:
<StoryLoadedWrapper>
<GraphViewer {...props} />
</StoryLoadedWrapper>
Signals completion via data-storyloaded="true"
Node/Edge stories use decorator:
export default {
decorators: [withReactFlowDecorator],
} satisfies Meta<typeof YourNode>;
Pre-commit checks flaky:
tests/unit/preCommitChecks.spec.ts has /tmp file race conditionsE2E tests fail "Connection refused":
npm run server:dev.envStorybook stories fail to load:
rm -rf node_modules/.cache/storybooknpm run storybook:buildAccessibility violations:
documentation/ACCESSIBILITY.md for WCAG 2.1 AA requirementsreviewOnFail: true for architecture visualizations (color contrast)This skill was automatically generated from the documentation_robotics_viewer codebase.