use-component-explorer Skill

Source

• Creator: microsoft
• Repository: microsoft/vscode-team-kit
• Skill file: component-explorer/skills/use-component-explorer/SKILL.md

What it does

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 componen

Skill instructions

Skill: Use Component Explorer Writing Fixtures Fixture files end in .fixture.ts or .fixture.tsx and are auto-discovered by the Vite plugin. Core Pattern Every fixture has a render function that receives a container DOM element and a RenderContext: ts import { defineFixture } from '@vscode/component-explorer'; export default defineFixture({ render: (container) = { // Render your component into container return { dispose: () = { / cleanup / } }; }, }); Render Context The second argument to render provides: - signal — AbortSignal for cancellation (check signal.aborted or listen to 'abort') ts defineFixture({ render: async (container, { signal }) = { const data = await fetch('/api/data', { signal }); container.textContent = await data.text(); }, }); React Fixtures tsx import { createRoot } from 'react-dom/client'; import { defineFixture } from '@vscode/component-explorer'; import { MyComponent } from './MyComponent'; export default defineFixture({ render: (container) = { const root = creat