用途：当需要为 packages/kilo-vscode/ 中的组件添加视觉回归测试、截图测试或 Storybook 故事时使用本技能。
架构：VS Code 扩展使用 Storybook + Playwright 做视觉回归测试。Storybook 故事用 SolidJS 组件配合 mock 上下文定义 UI 场景；Playwright 自动发现所有故事，在无头 Chromium 中渲染，并通过 toHaveScreenshot() 与基线 PNG 比对。基线为仅 Linux Chromium 的 PNG，存放在 tests/visual-regression.spec.ts-snapshots/（通过 Git LFS 跟踪）。测试运行器 tests/visual-regression.spec.ts 全自动，从 Storybook 索引抓取所有故事并为每个故事创建一个测试，无需编写 Playwright 测试代码，只需写故事。
主要能力：在既定故事文件中新增故事；复用 StoryProviders 提供上下文；通过 mockSessionValue、defaultMockData 覆盖会话与数据上下文；用 -200 后缀导出名触发 200px 窄视口；对非确定性内容加入 SKIP 集合。
使用方式：故事位于 packages/kilo-vscode/webview-ui/src/stories/。文件需以 /** @jsxImportSource solid-js */ 开头，用 <StoryProviders> 包裹，避免设置显式宽度，需限制高度时用 max-height。meta.title 决定快照子目录，导出名决定故事 ID。本地预览：在 packages/kilo-vscode/ 下运行 bun run storybook，访问 http://localhost:6007。基线仅在 Linux CI 生成，推送到 PR 后由 .github/workflows/visual-regression.yml 自动运行并提交。
适用场景：Kilo VS Code 扩展 Webview UI 的组件视觉回归覆盖，如聊天视图、提示输入、设置面板、会话列表、Agent 管理器组件等。
限制：仅支持 Chromium；基线仅限 Linux 生成；最大像素差异比 0.01；动画被强制关闭；跳过故事仅作最后手段。缺失事实暂未提供。