# component-fixtures

> Claude/Codex skill by [@microsoft](https://omgskills.com/library/microsoft/index.md) · 194k stars · Updated 2026-10-29

Use when creating or updating component fixtures for screenshot testing or their shared infrastructure, or when designing UI components to be fixture-friendly. Covers fixture file structure, theming, service setup, CSS scoping, async rendering, validation, and common pitfalls.

Tags: editor, electron, microsoft, typescript, visual-studio-code

## Install

```sh
git clone https://github.com/microsoft/vscode /tmp/vscode && ln -s /tmp/vscode/.github/skills/component-fixtures ~/.claude/skills/component-fixtures
```

## From README

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 mcpcomponent-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 mcpcomponent-explistfixtures tool to see all available fixtures and their URLs Use the mcpcomponent-expscreenshot tool to capture screenshots programmatically File Structure Each fixture file exports a default defineThemedFixtureGroup(...). The file must end with .fixture.ts.

## Links

- HTML page: https://omgskills.com/skills/microsoft/vscode/component-fixtures/
- GitHub: https://github.com/microsoft/vscode
- Author: [@microsoft](https://omgskills.com/library/microsoft/index.md)

## More from this repo

- [agent-host-logs](https://omgskills.com/skills/microsoft/vscode/agent-host-logs/index.md) — Used to analyze Agent Host debug log exports.
   - [@microsoft](https://omgskills.com/library/microsoft/index.md) · 194k stars
- [chat-customizations-editor](https://omgskills.com/skills/microsoft/vscode/chat-customizations-editor/index.md) — Used when working on the Chat Customizations editor — the management UI for agents, skills, instructions, hooks,...
   - [@microsoft](https://omgskills.com/library/microsoft/index.md) · 194k stars
- [act-on-feedback](https://omgskills.com/skills/microsoft/vscode/act-on-feedback/index.md) — Act on user feedback attached to the current session.
   - [@microsoft](https://omgskills.com/library/microsoft/index.md) · 194k stars