メニュー
Screenshot-based regression testing with Playwright. Compares rendered pixels against baseline PNGs. Use when working with stories, *.visual.spec.ts files, or baseline screenshots. Auto-apply when editing files in stories/ or *.visual.spec.ts.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | visual-regression |
| description | Screenshot-based regression testing with Playwright. Compares rendered pixels against baseline PNGs. Use when working with stories, *.visual.spec.ts files, or baseline screenshots. Auto-apply when editing files in stories/ or *.visual.spec.ts. |
Orchestrates screenshot-based regression testing with Playwright. Compares rendered pixels against baseline PNGs to detect unintended visual changes.
Visual regression has two specialized skills:
| Skill | Purpose | Use When |
|---|---|---|
component-screenshot-testing | React component pixels | Testing UI components, buttons, panels |
canvas-filmstrip-testing | Canvas-rendered matrix progressions | Testing 8-layer filmstrip visualizations |
stories/
01-bathymetry/
01-bathymetry.mdx → MDX story page
01-bathymetry.visual.spec.ts → Playwright visual test
strip-bathymetry-basic.png → Baseline screenshot (colocated)
02-energy-field/
...
components/ → Shared story components
visual-test-helpers.ts → Test helper utilities
App.tsx → Story viewer app
// playwright.visual.config.js
testDir: './stories',
testMatch: '**/*.visual.spec.ts',
snapshotPathTemplate: 'stories/{testFileDir}/{arg}{ext}',
# Verify stories compile (fast, no dev server)
npm run stories:build
# Run visual regression tests
npm run test:visual:headless # CI/agents
npm run test:visual:headed # Debugging with browser UI
# Update baselines after intentional changes
npm run test:visual:update:headless
npm run test:visual:update:headed
# Clear test artifacts
npm run reset:visual # Clear results/reports only
npm run reset:visual:all # Clear results + colocated baselines
# Start stories dev server for interactive debugging
npm run stories # Starts on http://localhost:3001
IMPORTANT: Always use the dev server (localhost), NOT file:// URLs. The file:// protocol triggers CORS errors.
npm run stories # Starts on http://localhost:3001
mcp__chrome-devtools__new_page({ url: "http://localhost:3001" })
// Navigate to specific page
mcp__chrome-devtools__new_page({ url: "http://localhost:3001/?page=01-bathymetry" })
// With presentation mode and theme
mcp__chrome-devtools__new_page({ url: "http://localhost:3001/?mode=presentation&theme=light" })
// Get element UIDs
mcp__chrome-devtools__take_snapshot()
// Screenshot specific element
mcp__chrome-devtools__take_screenshot({ uid: "<element-uid>" })
// Reload after changes
mcp__chrome-devtools__navigate_page({ type: "reload" })
CRITICAL: When modifying progression data, verify data first:
npx vitest run *Progressions.test.tsWrong: Change coefficient → Update visual → "Looks the same"
Right: Change coefficient → Check matrix → Verify numbers → Update visual
After code changes, verify stories still build:
npm run stories:build
This catches broken imports, type errors, missing dependencies.
Do NOT start dev server just to verify - use the build.
// Wrong
import { foo } from '../state/waveModel.js';
// Correct
import { foo } from '../state/waveModel';
// In *Progressions.ts - ensure strips are exported
export const BATHYMETRY_STRIPS = [BATHYMETRY_STRIP_BASIC];
Visual regression for canvas-rendered matrix progressions. Tests filmstrip strips that show how 2D data evolves visually over time. Auto-apply when editing *Progressions.ts strip definitions or stories with filmstrip components.
Screenshot testing for React components with Playwright. Captures component pixels and compares to baselines. Auto-apply when editing React component stories or *.visual.spec.ts files that test UI components.
Pure logic and math testing with Vitest. Use for single-point assertions on functions, state transitions, and physics calculations. Auto-apply when editing *.test.ts files (except *Progressions.test.ts).
Matrix data model verification using ASCII diagrams. Use when working with *Progressions.ts files, defineProgression(), or testing how 2D numeric grids evolve over time. Auto-apply when editing files matching *Progressions.ts or src/test-utils/ascii*.ts.
Testing strategy orchestrator. Use when discussing test types, test order, or choosing how to test something. Auto-apply for general testing questions.
Apply project planning conventions when creating or organizing plans. Use when user asks to create a plan, add a feature plan, document a bug, or work with the plans/ directory.