What problem does it solve? Visual regression testing of isolated UI components requires rendering widgets outside the full workbench, which is difficult when components depend on editor services, themes, and deep CSS ancestor selectors. This Skill guides you through building fixture files that render components in a shadow DOM with Dark and Light themes for programmatic screenshot capture. ## Core Features & Use Cases - Fixture Authoring: Create .fixture.ts files using defineThemedFixtureGroup and defineComponentFixture that auto-generate Dark/Light variants discovered by the Vite dev server. - Service Setup: Use createEditorServices to get a TestInstantiationService with base editor services pre-registered, plus mock services via additionalServices and the mock<T>() helper. - Component Adaptation Guidance: Refactor components to be fixture-friendly by decoupling CSS from ancestor selectors, injecting services via DI, exposing domNode, and disabling auto-focus for stable screenshots. - Use Case: You built a new chat input widget and need screenshot coverage. Write a fixture that registers the required services, renders the widget in Loading and Completed states, and capture both theme variants with the component explorer MCP tools. ## Quick Start Create a component fixture for my widget and screenshot it in both Dark and Light themes using the component explorer tools.
