skills.rest
Kilo-Org
Kilo-OrgOFFICIAL
Explore all skills by this author →
Website𝕏@kilocodeGitHub

vscode-visual-regression

Write Storybook stories and Playwright visual regression tests for VS Code extension webview components.

27.1k|3.1k|Updated Mar 10, 2025
Search Tags:#playwright#storybook#visual regression#webview#solidjs#screenshot testing#VSCode extension
One-click install
npx skills add https://github.com/Kilo-Org/kilocode --skill vscode-visual-regression
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vscode-visual-regression
Source: https://github.com/Kilo-Org/kilocode/tree/main/.kilocode/skills/vscode-visual-regression
Command: npx skills add https://github.com/Kilo-Org/kilocode --skill vscode-visual-regression

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Adding visual regression coverage to the Kilo VS Code extension webview UI requires knowing the exact Storybook story structure, mock context providers, snapshot naming conventions, and CI baseline workflow, which are easy to get wrong without guidance.

Core Features & Use Cases

  • Story authoring guidance: Provides the exact SolidJS story template with StoryProviders, mock session data, and context overrides for components like ChatView, PromptInput, and AssistantMessage.
  • Snapshot and viewport conventions: Explains how meta titles and export names map to snapshot paths, and how the -200 suffix triggers narrow 200px viewport rendering.
  • CI baseline workflow: Documents how Linux CI auto-generates and commits baseline PNGs via Git LFS, so no local screenshot generation is needed.
  • Use Case: When adding a new settings panel component to the webview UI, use this Skill to write a correctly structured story with mock providers, push the PR, and let CI generate the baseline screenshots.

Quick Start

Ask the AI to add a visual regression test story for a specific component in packages/kilo-vscode/webview-ui, and it will produce the story file following the required conventions.

Frequently Asked Questions about vscode-visual-regression

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a visual regression test for a VS Code webview component?▼

Write a Storybook story in webview-ui/src/stories/ wrapping the component in StoryProviders with mock data. The Playwright runner auto-discovers all stories and compares screenshots against baselines, so no test code is needed.

How do I write Storybook stories for SolidJS components?▼

Start the file with the @jsxImportSource solid-js pragma, define a meta object with a title, and export story objects with a render function. Wrap components in StoryProviders to supply required contexts like Session, Config, and VSCode.

Do I need to generate baseline screenshots locally for Playwright visual tests?▼

No, baselines are generated on Linux CI only because font rendering differs on macOS. Push your story in a PR and the visual-regression workflow auto-commits new baseline PNGs via Git LFS.

Why does my Storybook story throw errors about missing contexts?▼

Components calling useVSCode, useSession, or similar hooks throw without their providers. Always wrap stories in StoryProviders, which supplies all required contexts, or override specific contexts like SessionContext with mockSessionValue.

How do I test a component at multiple viewport widths in Playwright?▼

Create separate story exports where the narrow variant's export name ends in 200, such as Default200. The test runner detects story IDs ending in -200 and renders them at 200px width instead of the default 420px.

Why do visual regression screenshots differ between runs?▼

Animated or non-deterministic content like spinners causes flaky screenshots. Prefer static states in stories, or add the story ID to the SKIP set in visual-regression.spec.ts as a last resort.

Related Skills

Explore More Software Engineering Skills→
joeblackwaslikejoeblackwaslike

vscode-extension-builder-lawvable

Build, bundle, test, and package VS Code extensions into .vsix files.

Community
Advanced
p-o-ke-naep-o-ke-nae

github-flow

Guide GitHub Flow branching, commits, testing, pull requests, and squash merges.

Community
Intermediate
edonyzpcedonyzpc
149

obsidian-test-vault-smoke

Validate Obsidian plugin changes via tiered end-to-end smoke tests.

Community
Advanced
dkyazzentwatwadkyazzentwatwa
32

visual-regression

Automate visual regression testing setup for React, Vue, and Svelte projects.

Community
Advanced