Component Fixtures

This handles component fixtures for visual screenshot testing in VS Code's component explorer. It walks you through the fixture file structure, how to use defineThemedFixtureGroup to auto-generate dark and light variants, and how to set up the dependency injection container with createEditorServices. The real value is in the specifics: CSS scoping gotchas when your component relies on deep ancestor selectors, how to avoid DOM reparenting that causes flicker in screenshots, and patterns for mocking services. Use it when you're building isolated UI component tests or need to make existing components fixture-friendly without breaking their production CSS.

skills.sh installs: 277
GitHub stars: 195.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add microsoft/vscode --skill component-fixtures --agent claude-code

Installs into .claude/skills of the current project.

Files

Component Fixtures

Component fixtures render isolated UI components for visual screenshot testing via the component explorer. Fixtures live in src/vs/workbench/test/browser/componentFixtures/ and are auto-discovered by the Vite dev server using the glob src/**/*.fixture.ts.

Use tools mcp_component-exp_* to list and screenshot fixtures. If you cannot see these tools, inform the user to them on.

Running Fixtures Locally

Start the component explorer server: run the Component Explorer Server task
Use the mcp_component-exp_list_fixtures tool to see all available fixtures and their URLs
Use the mcp_component-exp_screenshot tool to capture screenshots programmatically

File Structure

Each fixture file exports a default defineThemedFixtureGroup(...). The file must end with .fixture.ts.

src/vs/workbench/test/browser/componentFixtures/
  fixtureUtils.ts              # Shared helpers (DO NOT import @vscode/component-explorer elsewhere)
  myComponent.fixture.ts       # Your fixture file