用途：当用户要求为项目添加、搭建或集成 Component Explorer 时，按此技能提供的步骤操作。
前提条件：项目使用 Vite 作为打包器；Node.js >= 22。
主要步骤：
- 安装依赖：npm install @vscode/component-explorer @vscode/component-explorer-cli @vscode/component-explorer-vite-plugin，使用项目自身的包管理器（npm、pnpm、yarn）；工作区 monorepo 应安装到拥有 Vite 配置的包中。
- 在 vite.config.ts 中加入 componentExplorer() 插件，可配置 include、route（默认 /___explorer）、build（app-only/all/explorer-only）、outFile、logLevel。fixture 不在 ./ 下时需显式设置 include。
- 创建 component-explorer.json，用于 CLI/daemon/MCP 功能，可配置 screenshotDir、viteConfig，以及 redirection.port（如需固定端口）。
- 配置 .vscode/mcp.json 添加 MCP 服务器，使 AI 代理可截图、对比 fixture 并与组件交互。
- 在 .vscode/tasks.json 添加启动 Component Explorer 服务器的后台任务。
- 可选：在 .vscode/launch.json 添加 Chrome 启动配置，需先配置重定向端口。
- 创建首个 .fixture.tsx/.fixture.ts 文件验证，启动 dev server 后打开 http://localhost:5173/___explorer，并运行服务器任务或启动配置，确认 MCP 连接可用。
限制：仅适用于 Vite 项目，且需 Node.js >= 22；MCP、任务与启动配置均针对 VS Code。fixture 编写指南参见 use-component-explorer 技能，其他细节以资料所列为准。