component-fixtures Skill
Use when creating or updating component fixtures for screenshot testing, or when designing UI components to be fixture-friendly. Covers fixture file structure, theming, service setup, CSS scoping, async rendering, and common pitfalls. Published by microsoft in vscode.
What is component-fixtures Skill?
Use when creating or updating component fixtures for screenshot testing, or when designing UI components to be fixture-friendly. Covers fixture file structure, theming, service setup, CSS scoping, async rendering, and common pitfalls. Published by microsoft in vscode. This profile combines repository metadata with install, compatibility, and usage signals so developers can quickly decide whether it fits their agent workflow before opening the source repository.
Automated repository signals based on public metadata such as recency, license, installation evidence, and adoption. These are not a security audit or endorsement.
Key capabilities
- Includes SKILL.md support
- Reusable instructions support
- Browser automation
- Testing
- Design and media
- Browser automation use cases
- Testing use cases
Technical details
- Install or run with Copy skill directory
When to use component-fixtures Skill
- Use it for browser automation.
- Use it for testing.
- Use it for design and media.
Built with
Editorial notes
Source
- Creator: microsoft
- Repository: microsoft/vscode
- Skill file: .github/skills/component-fixtures/SKILL.md
What it does
Use when creating or updating component fixtures for screenshot testing, or when designing UI components to be fixture-friendly. Covers fixture file structure, theming, service setup, CSS scoping, async rendering, and common pitfalls.
Skill instructions
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 mcpcomponent-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 mcpcomponent-explistfixtures tool to see all available fixtures and their URLs 3. Use the mcpcomponent-expscreenshot 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 { Compon
Explore related resources
Frequently asked questions
What is component-fixtures?
component-fixtures is a open-source AI agent skill with Copy skill directory. Use when creating or updating component fixtures for screenshot testing, or when designing UI components to be fixture-friendly.
Who is component-fixtures best for?
component-fixtures is best for reusing agent instructions, scripts, and references, browser automation workflows, testing workflows, design and media workflows.
How do I install component-fixtures?
Install or run component-fixtures using Copy skill directory. Check component-fixtures for the latest setup command.
Is component-fixtures actively maintained?
component-fixtures may need a closer maintenance check before production use.
Auto-fetched from GitHub.
