组件夹具与截图测试
帮助你为 VS Code 组件创建稳定、可主题化的截图测试夹具。
技能将操作限定为组件 fixture 创建、更新和截图测试，并要求通过指定工具访问 fixture；未见恶意行为或破坏性默认操作，因此保留较高分。但未说明工具权限、截图数据流、敏感内容处理、用户确认、外部影响或回滚机制，且来源归属仅由仓库上下文支持，扣8分。
文档提供了服务器启动、fixture 列举、截图和多种渲染模式，关键 happy path 基本可复现，因此给8分。静态材料没有 fixture 专属测试、工具不可用之外的异常处理、输入校验或诊断失败信息；“inform the user to them on”存在明显措辞错误，扣2分。
前置描述明确了适用场景、目录、文件命名和触发条件，并覆盖主题、服务、异步和 CSS 场景，给9分。非适用范围、输入输出契约、语义误触发边界、中文支持和中国大陆网络可达性未说明；核心截图流程依赖可能不可用的 MCP 工具，扣6分。
文档结构清晰，包含渐进式说明、代码示例、服务表格、常见陷阱和设计建议；仓库上下文提供 MIT 许可及 Microsoft 归属，因此给8分。技能自身没有版本、变更记录、维护责任、更新路径、安装依赖说明或 FAQ，且依赖工具的获取方式不完整，扣7分。
文档能直接指导用户组织 fixture、注入服务、处理主题和避免截图抖动，核心任务价值明确，按静态上限给7分。没有提交的代表性 fixture 输出、截图结果或独立执行证据，且最终仍需用户自行启动环境和调用工具，无法证明完整、直接可用的结果，扣8分。
技能内容具体、路径和 API 名称可审计，仓库 package.json 也能佐证 component explorer 依赖，给4分。未提供该技能专属测试套件、CI 覆盖、截图基线或第三方执行结果，结论主要依赖文档陈述，扣6分。
- 使用前确认 mcp_component-exp_* 工具确实已安装、可访问且其截图数据不会泄露敏感界面内容。
- 文档未定义失败恢复、回滚和依赖版本锁定流程；工具或组件 explorer 不可用时，用户可能需要自行排查环境。
- 未说明中国大陆网络环境和中文工作流支持，远程依赖可达性需单独验证。
这个 Skill 能做什么，适合哪些场景？
这个技能用于在 VS Code 仓库中创建或更新组件夹具，也用于设计便于夹具化的 UI 组件。它规定了夹具文件的位置、命名结构、主题变体、服务注册、CSS 作用域和异步渲染方式。夹具通过组件浏览器渲染隔离的 UI 组件，并可使用 MCP 工具列出夹具和生成截图。它适合需要验证组件视觉状态的 VS Code 开发者，但依赖组件浏览器服务器和对应的 MCP 工具。
指导代理在 src/vs/workbench/test/browser/componentFixtures/ 创建以 .fixture.ts 结尾的文件，并使用 defineThemedFixtureGroup、defineComponentFixture 和 createEditorServices 定义夹具。它说明如何注册额外服务或模拟服务、创建文本模型、应用 Dark/Light 主题、将组件放入 shadow DOM，以及通过正确的祖先 DOM 结构匹配生产 CSS 选择器。它还指导代理避免异步重新挂载导致的闪烁，暴露组件的 domNode，并为组件增加可关闭自动聚焦或直接进入完成状态的选项。运行时，先启动 Component Explorer Server 任务，再调用 mcp_component-exp_list_fixtures 列出夹具和 URL，或调用 mcp_component-exp_screenshot 截取截图。
- VS Code 前端开发者需要为新 UI 组件添加 Dark 和 Light 截图测试时，使用该技能生成标准夹具结构。
- 维护现有组件的开发者发现生产 CSS 依赖深层祖先选择器时，使用该技能重建必要的 DOM 层级或重构为组件自包含样式。
- 需要隔离外部依赖的测试作者在组件依赖额外服务时，使用该技能通过依赖注入注册实现或 mock 实例。
- 进行视觉回归检查的开发者在组件浏览器服务器运行后，使用该技能列出夹具并程序化生成截图。
- 设计新组件的工程师希望组件易于测试时，参考该技能避免构造阶段读取布局、避免强制自动聚焦，并公开可挂载的 DOM 节点。
这个 Skill 有哪些优点和局限？
- 覆盖夹具文件结构、主题、服务注册、CSS 作用域、异步渲染和常见截图稳定性问题。
- 提供 `fixtureUtils.ts` 中各辅助函数的明确职责和可直接参考的 TypeScript 模式。
- 强调测试真实组件代码和生命周期，而不是在夹具中复制或重新组合组件。
- 支持通过 `defineThemedFixtureGroup` 自动生成 Dark 和 Light 变体。
- 范围限定在 VS Code 仓库及其组件浏览器约定，不能据此推断适用于其他 UI 框架或仓库。
- 运行截图流程需要 Component Explorer Server 任务和 `mcp_component-exp_*` 工具；来源未提供这些工具的安装或配置步骤。
- 来源没有提供独立测试套件、平台覆盖范围或截图基准结果。
- 该技能主要提供开发指导和调用流程，不是一个独立的组件夹具生成或截图执行程序。
如何安装这个 Skill？
该技能属于 microsoft/vscode 仓库中的技能集合，路径为 .github/skills/component-fixtures/SKILL.md。将仓库中的该文件保留在此路径即可；来源没有提供独立安装命令，也没有说明将它安装到其他客户端的具体步骤。使用完整集合时，应按仓库提供的方式获取 https://github.com/microsoft/vscode，但来源未进一步规定获取命令。
如何使用这个 Skill？
在 VS Code 仓库中提出类似请求：为 MyWidget 创建一个包含 Default、Dark 和 Light 变体的组件夹具，并使用 mock 服务和稳定的截图布局。 然后在 src/vs/workbench/test/browser/componentFixtures/ 创建或更新 .fixture.ts 文件，默认导出 defineThemedFixtureGroup(...)。启动 Component Explorer Server 任务；使用 mcp_component-exp_list_fixtures 查看夹具及其 URL，再使用 mcp_component-exp_screenshot 截图。如果这些 MCP 工具不可见，需要先让使用环境启用它们。具体客户端配置方式在来源中未说明。