$ loading_
帮助你在使用组件浏览器的项目中高效处理 UI 变更、截图与视觉测试。
复制安装指令，让 AI 自动完成配置 · 推荐新手
请帮我安装 askskill 上的 "use-component-explorer" 技能： 1. 下载 https://raw.githubusercontent.com/microsoft/vscode-team-kit/main/component-explorer/skills/use-component-explorer/SKILL.md 2. 保存为 ~/.claude/skills/use-component-explorer/SKILL.md 3. 装好后重载技能，告诉我可以用了
项目使用组件浏览器。我刚新增了一个按钮组件，请告诉我应该如何添加 fixture，用于展示默认态、禁用态和加载态，并给出示例结构。
说明应在组件浏览器中如何新增展示用例，并给出多状态 fixture 的组织方式与示例。
我修改了卡片组件的样式。请根据组件浏览器的工作流，列出我需要更新的截图、视觉测试检查点，以及如何避免遗漏回归问题。
一份围绕截图更新与视觉回归检查的操作清单，帮助完成 UI 变更后的验证。
组件浏览器里的视觉测试失败了，差异出现在弹窗组件。请帮我分析常见原因，并给出按优先级排序的排查步骤。
按优先级整理的排查建议，涵盖环境差异、数据状态、样式变更和截图基线更新等可能原因。
Fixture files end in .fixture.ts or .fixture.tsx and are auto-discovered by the Vite plugin.
Every fixture has a render function that receives a container DOM element and a RenderContext:
import { defineFixture } from '@vscode/component-explorer';
export default defineFixture({
render: (container) => {
// Render your component into container
return { dispose: () => { /* cleanup */ } };
},
});
The second argument to render provides:
signal — AbortSignal for cancellation (check signal.aborted or listen to 'abort')defineFixture({
render: async (container, { signal }) => {
const data = await fetch('/api/data', { signal });
container.textContent = await data.text();
},
});
import { createRoot } from 'react-dom/client';
import { defineFixture } from '@vscode/component-explorer';
import { MyComponent } from './MyComponent';
export default defineFixture({
render: (container) => {
const root = createRoot(container);
root.render(<MyComponent />);
return { dispose: () => root.unmount() };
},
});
Group related fixtures in a single file:
import { defineFixture, defineFixtureGroup } from '@vscode/component-explorer';
export default defineFixtureGroup({
Default: defineFixture({ render: (c) => { /* ... */ } }),
WithError: defineFixture({ render: (c) => { /* ... */ } }),
Disabled: defineFixture({ render: (c) => { /* ... */ } }),
});
Groups can have metadata (path prefix, labels):
export default defineFixtureGroup({ path: 'Forms/', labels: ['forms'] }, {
Primary: defineFixture({ /* ... */ }),
Secondary: defineFixture({ /* ... */ }),
});
For closely related variants rendered side-by-side:
import { defineFixture, defineFixtureGroup, defineFixtureVariants } from '@vscode/component-explorer';
export default defineFixtureGroup({
Sizes: defineFixtureVariants({
Small: defineFixture({ render: (c) => { /* ... */ } }),
Medium: defineFixture({ render: (c) => { /* ... */ } }),
Large: defineFixture({ render: (c) => { /* ... */ } }),
}),
});
Set background: 'dark' for components designed for dark backgrounds:
defineFixture({
background: 'dark',
render: (container) => { /* ... */ },
});
Fixtures must not mutate global state. Each fixture's render function should only modify the provided container element and return a dispose function that fully cleans up. No writes to document.body, global variables, localStorage, shared singletons, or other state outside the container. This ensures fixtures can be rendered in any order, in parallel, and multiple times without interference.
Do not use global CSS selectors like :root, html, body, or *. Every style must be scoped to a class name (e.g. .app-root, .my-component). Components are rendered in isolation inside the explorer — global styles leak across fixtures and break the isolated rendering model.
App-level CSS files (resets, CSS variables on :root, etc.) are fine for the app itself, but they must not be imported by components or fixture files. Keep app-level styles in separate entry points (e.g. index.css imported only by the app's main.ts) so they are never loaded during fixture rendering. If a component needs shared variables or resets, apply them within the fixture's container element or via the project-local wrapper (see below).
defineFixture Directly…
调用多模型交叉审查代码变更、PR与高风险修改，辅助发现缺陷与争议点
帮助你完整搭建 Component Explorer，配置 CLI、MCP、VS Code 任务与调试环境。