Use this skill when the user asks you to add visual regression tests, screenshot tests, or Storybook stories for components in packages/kilo-vscode/.

Architecture

The VS Code extension uses Storybook + Playwright for visual regression testing:

1. Storybook stories define UI scenarios using SolidJS components with mock contexts
2. Playwright auto-discovers all stories, renders each in headless Chromium, and compares screenshots against baseline PNGs using toHaveScreenshot()
3. Baselines are Linux-only Chromium PNGs stored in tests/visual-regression.spec.ts-snapshots/ (tracked via Git LFS)

The test runner at tests/visual-regression.spec.ts is fully automatic — it fetches ALL stories from the Storybook index and creates one Playwright test per story. You do NOT write Playwright test code. You only write stories.

How to add a visual regression test

Step 1: Decide which story file to use

Stories live in packages/kilo-vscode/webview-ui/src/stories/. Existing files and their scope:

| File | Components covered |