# Vscode Visual Regression

Write Storybook stories and visual regression tests for the Kilo VS Code extension...

- Repository: https://github.com/Kilo-Org/kilocode (27829 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Kilo-Org/kilocode --skill vscode-visual-regression -g -a claude-code -y`
Codex: `npx skills add Kilo-Org/kilocode --skill vscode-visual-regression -g -a codex -y`
Cursor: `npx skills add Kilo-Org/kilocode --skill vscode-visual-regression -g -a cursor -y`
Gemini CLI: `npx skills add Kilo-Org/kilocode --skill vscode-visual-regression -g -a gemini-cli -y`

## Description

Write Storybook stories and visual regression tests for the Kilo VS Code extension webview UI

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

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:

```tsx
/** @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"

The rest: https://github.com/Kilo-Org/kilocode/blob/HEAD/.kilocode/skills/vscode-visual-regression/SKILL.md