What problem does it solve? Visual regression testing of isolated UI components requires rendering widgets outside the full workbench, which breaks CSS selectors, service dependencies, and theming. This Skill guides you through building fixture files that render components correctly in the component explorer for screenshot-based testing. ## Core Features & Use Cases - Fixture Authoring Patterns: Provides the standard defineThemedFixtureGroup and defineComponentFixture structure with automatic Dark/Light theme variants and shadow DOM isolation. - Service and CSS Guidance: Covers registering editor services via createEditorServices, mocking services with mock<T>(), and recreating ancestor DOM structure so production CSS selectors match. - Component Refactoring Advice: Explains how to adapt existing components for fixturability, including dependency injection, shallow CSS selectors, disabling auto-focus, and exposing domNode. - Use Case: You built a new chat widget and need screenshot tests. Use this Skill to write a .fixture.ts file with Empty, Loading, and Completed variants, then capture screenshots via the component explorer MCP tools. ## Quick Start Create a component fixture for my widget following the component-fixtures skill so I can screenshot it in the component explorer.
