vscode-visual-regression

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
agent-manager.stories.tsx	FileTree, DiffPanel, FullScreenDiffView, WorktreeItem
chat.stories.tsx	ChatView, QuestionDock
composite.stories.tsx	AssistantMessage with tool cards, permissions, questions
prompt-input.stories.tsx	PromptInput (sidebar prompt bar)
settings.stories.tsx	Settings panel, ProvidersTab
history.stories.tsx	SessionList
shared.stories.tsx	ModelSelector and shared controls

Add to an existing file if the component fits. Create a new file only for a genuinely new component area.

Step 2: Write the story

Every story file follows this exact structure:

/** @jsxImportSource solid-js */
/**
 * Stories for [ComponentName].
 */

import type { Meta, StoryObj } from "storybook-solidjs-vite"
import { StoryProviders } from "./StoryProviders"
// Import the component(s) under test
import { MyComponent } from "../components/path/MyComponent"

const meta: Meta = {
  title: "MyCategory", // Becomes the snapshot subdirectory name (lowercased)
  parameters: { layout: "padded" }, // or "fullscreen"
}
export default meta
type Story = StoryObj

export const MyStoryName: Story = {
  name: "MyComponent — description of variant",
  render: () => (
    <StoryProviders>
      <div style={{ "max-height": "400px", overflow: "auto" }}>
        <MyComponent someProp="value" />
      </div>
    </StoryProviders>
  ),
}