Agent skill · design visual · microsoft
component-fixtures
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.
Why this skill is useful
Provides specific patterns and utilities for creating component fixtures that enhance UI testing workflows.
What it needs
Requires vite installed locally. About 10k tokens when loaded. Last updated 2026-08-07. 188,455 stars on the source repository.
What this skill does
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 1. Start the component explorer server: run the Component Explorer Server task 2. Use the mcpcomponent-explistfixtures tool to see all available fixtures and their URLs 3. 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. Basic Pattern Key points: defineThemedFixtureGroup automatically creates Dark and Light variants for each fixture defineComponentFixture wraps your render function with theme setup, async readiness, and disposable management createEditorServices provides a TestInstantiationService with base editor services pre-registered Always register created widgets with disposableStore.add(...) to prevent leaks Pass colorTheme: theme to createEditorServices so theme colors render correctly File icon themes Fixtures use Seti file icons by default. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills microsoft/component-fixtures