microsoft/component-explorer
Skills for setting up and using the VS Code Component Explorer — fixture-based visual testing with MCP-powered screenshot comparison.
Set up and integrate the Component Explorer into a Vite based project. USE FOR: "set up component explorer", "add component explorer to a Vite app", "install component explorer packages", "configure the component explorer Vite plugin". DO NOT USE FOR: "write a fixture for a component", "set up a different test framework".
Full setup of the Component Explorer including CLI, MCP server, VS Code tasks and launch config. USE FOR: "complete component explorer setup with the CLI", "configure the component explorer MCP server", "add VS Code tasks for the component explorer", "add a launch config for the component explorer". DO NOT USE FOR: "minimal or plugin only component explorer setup", "write a fixture for a component".
Lightweight setup — install Component Explorer packages and add the Vite plugin, with MCP server for AI agent integration. USE FOR: "lightweight or minimal component explorer setup", "install the packages and add the Vite plugin", "component explorer without the CLI daemon", "MCP server for AI agent integration". DO NOT USE FOR: "full setup with VS Code tasks and launch config", "write a fixture for a component".
Write and update component explorer fixtures for UI work — fixtures, screenshots, visual testing. USE FOR: "create a fixture for a component", "add fixture groups or variants", "screenshots or visual testing of UI", "adding or changing UI in a component explorer project". DO NOT USE FOR: "set up or install the component explorer", "write a unit test with a test runner".