$ ~/registry/skill/microsoft-component-explorer-skills-setup-component-explorer-light

SKILL

setup-component-explorer-light

Name: setup-component-explorer-light
Author: microsoft

Quickly set up Component Explorer with Vite and AI agent integration.

Stars

★ 25

Source

GitHub

Updated

2026-07-22

// securityLow risk

Prompt only, no code
Open source

Running security audit…

Credentials
Network egress
Code execution
Data access
Supply chain

// install

Copy the install command and let the AI configure it · recommended for beginners

Please install the "setup-component-explorer-light" skill from askskill:
1. Download https://raw.githubusercontent.com/microsoft/vscode-team-kit/main/component-explorer/skills/setup-component-explorer-light/SKILL.md
2. Save it as ~/.claude/skills/setup-component-explorer-light/SKILL.md
3. Reload skills and tell me it's ready

// download

Download SKILL.mdInstall manifest ↗

// examples

Initialize a lightweight component environment

Prompt

Set up the lightweight version of Component Explorer for my frontend project, install the required dependencies, and add the Vite plugin. Please provide the full commands and file changes.

Expected

Provides install commands, setup steps, and example project file changes.

Integrate the MCP server

Prompt

Add an MCP server to my existing Component Explorer setup for AI agent integration, and explain how to start it and verify the connection.

Expected

Provides MCP configuration steps, startup commands, and connection verification guidance.

Troubleshoot installation and plugin issues

Prompt

I ran into errors while installing Component Explorer and the Vite plugin. Give me a troubleshooting checklist with likely fixes.

Expected

Provides a step-by-step checklist covering dependencies, config, version compatibility, and startup issues.

// docs

Skill: Setup Component Explorer (Light)

Minimal setup: install packages and wire the Vite plugin so fixtures are served at ___explorer. For the full setup (CLI daemon, VS Code tasks & launch config), use the setup-component-explorer-full skill.

Prerequisites

The project uses Vite as its bundler
Node.js >= 22

Step 1: Install Packages

npm install @vscode/component-explorer @vscode/component-explorer-vite-plugin

Use the project's package manager (npm, pnpm, yarn). For workspace monorepos, install into the package that owns the Vite config.

Step 2: Configure Vite Plugin

Add componentExplorer() to vite.config.ts:

import { componentExplorer } from '@vscode/component-explorer-vite-plugin';

export default defineConfig({
  plugins: [
    // ... existing plugins (react, tailwind, etc.)
    componentExplorer(),
  ],
});

Plugin Options

Option	Default	Description
`include`	`'./src/*/.fixture.{ts,tsx}'`	Glob pattern for fixture files
`route`	`'/___explorer'`	URL path for the explorer UI
`build`	`'app-only'`	Build mode: `'app-only'`, `'all'`, or `'explorer-only'`
`outFile`	`'___explorer.html'`	Output filename for built explorer
`logLevel`	`'info'`	`'silent'`, `'info'`, `'verbose'`, `'warn'`, `'error'`

For projects where fixtures live outside ./src, set include explicitly:

componentExplorer({
  include: './test/**/*.fixture.{ts,tsx,js,jsx}',
}),

Step 3: Start Dev Server and Open Explorer

Start the Vite dev server as a background terminal process (e.g. npx vite, pnpm dev).
Once the server is ready, open the component explorer in VS Code's Simple Browser by running the VS Code command (adjust port if needed):
```
simpleBrowser.show with url: http://localhost:5173/___explorer
```

Important: Before writing any fixtures, read the use-component-explorer skill. It covers fixture patterns, project-specific wrappers, and best practices that are essential for correct usage.

Optional: MCP Server for AI Agent Integration

To enable AI agents (Copilot) to take screenshots, compare fixtures, and interact with components, add the MCP server.

Install the CLI

npm install @vscode/component-explorer-cli

Create `component-explorer.json`

Create component-explorer.json next to the Vite config (or at the project root). This points the CLI at the running Vite dev server:

{
  "$schema": "node_modules/@vscode/component-explorer-cli/dist/component-explorer-config.schema.json",
  "sessions": [{ "name": "current" }],
  "server": {
    "type": "http",
    "url": "http://localhost:5173"
  }
}

Adjust the url if the dev server uses a different port.

Configure `.vscode/mcp.json`

Create or update .vscode/mcp.json to register the MCP server:

{
  "servers": {
    "component-explorer": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "component-explorer",
        "mcp",
        "-p",
        "./component-explorer.json"
      ]
    }
  }
}

Adjust the -p path if component-explorer.json is not at the workspace root.