component-fixtureslisted
Install: claude install-skill Pointa-Labs/basehalf
# 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
1. Start the component explorer server: run the **Component Explorer Server** task
2. Use the `mcp_component-exp_list_fixtures` tool to see all available fixtures and their URLs
3. 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
```
## Basic Pattern
```typescript
import { ComponentFixtureContext, createEditorServices, defineComponentFixture, defineThemedFixtureGroup } from './fixtureUtils.js';
export default defineThemedFixtureGroup({ path: 'myFeature/' }, {
Default: defineComponentFixture({ render: renderMyComponent }),
AnotherVariant: defineComponentFixture({ render: renderMyComponent }),
});
function renderMyComponent({ container, disposableStore, theme }: ComponentFixtu