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"