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

SKILL

setup-component-explorer-full

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

Set up Component Explorer with CLI, MCP, and VS Code tooling.

Stars

★ 24

Source

GitHub

Updated

2026-07-08

// 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-full" skill from askskill:
1. Download https://raw.githubusercontent.com/microsoft/vscode-team-kit/main/component-explorer/skills/setup-component-explorer-full/SKILL.md
2. Save it as ~/.claude/skills/setup-component-explorer-full/SKILL.md
3. Reload skills and tell me it's ready

// download

Download SKILL.mdInstall manifest ↗

// examples

Initialize a complete development environment

Prompt

Help me fully set up Component Explorer, including installing the CLI, configuring the MCP server, generating VS Code tasks and launch.json, and explaining each step.

Expected

A ready-to-use setup guide with configuration files and explanations for each part.

Add missing setup to an existing project

Prompt

This is an existing frontend project. Add the full Component Explorer setup, including CLI commands, MCP server configuration, VS Code tasks, and debug launch settings.

Expected

An incremental configuration plan tailored to the current project for quick integration and debugging.

Troubleshoot missing configuration issues

Prompt

My Component Explorer cannot start correctly in VS Code. Check which CLI, MCP, or launch/task configurations are missing and provide a full fix.

Expected

A diagnosis of missing or incorrect setup plus actionable fixes and complete examples.

// docs

Skill: Setup Component Explorer

When the user asks to add, set up, or integrate the component explorer into their project, follow this guide.

Prerequisites

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

Step 1: Install Packages

npm install @vscode/component-explorer @vscode/component-explorer-cli @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 ./, set include explicitly:

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

Step 3: Create `component-explorer.json`

Create a configuration file for the CLI/daemon/MCP features (place next to the Vite config or at the project root):

{
  "$schema": "./node_modules/@vscode/component-explorer-cli/dist/component-explorer-config.schema.json",
  "screenshotDir": ".screenshots",
  "viteConfig": "./vite.config.ts",
  
  // If you need a stable port, configure the redirection server port (required for the launch config in Step 6):
  "redirection": { "port": 5331 }
}

Step 4: Configure VS Code — MCP Server

Create or update .vscode/mcp.json to add the component explorer MCP server. This enables AI agents to take screenshots, compare fixtures, and interact with components:

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

Adjust the -p path to point to the component-explorer.json location relative to cwd.

Step 5: Configure VS Code — Component Explorer Server Task

Add a task to .vscode/tasks.json to start the component explorer server:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Component Explorer Server",
      "type": "shell",
      "command": "./node_modules/.bin/component-explorer serve -p ./component-explorer.json --kill-if-running",
      "isBackground": true,
      "problemMatcher": {
        "owner": "component-explorer",
        "fileLocation": "absolute",
        "pattern": {
          "regexp": "^\\s*at\\s+(.+?):(\\d+):(\\d+)\\s*$",
          "file": 1,
          "line": 2,
          "column": 3
        },
        "background": {
          "activeOnStart": true,
          "beginsPattern": ".*Setting up sessions.*",
          "endsPattern": "Redirection server listening on.*"
        }
      }
    }
  ]
}

If other tasks already exist, merge the new task into the existing tasks array.

Step 6: Configure VS Code — Launch Configuration (Optional)

To open the component explorer UI in Chrome, add a launch configuration to .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Component Explorer (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:5331/___explorer",
      "preLaunchTask": "Component Explorer Server"
    }
  ]
}

…

View full docs ↗