What does this skill do, and when should you use it?
This skill helps VS Code contributors create or update component fixtures and design UI components that are easy to fixture. It defines the expected fixture location, file pattern, theme variants, service setup, CSS scoping, and asynchronous rendering practices. Fixtures render isolated components through the component explorer, with MCP tools available for listing fixtures and capturing screenshots. It is a good fit for VS Code UI work that needs visual state coverage, provided the Component Explorer Server and matching MCP tools are available.
It guides the agent to create .fixture.ts files under src/vs/workbench/test/browser/componentFixtures/ and define them with defineThemedFixtureGroup, defineComponentFixture, and createEditorServices. It explains how to register additional or mocked services, create text models, apply Dark and Light themes, render inside shadow DOM, and recreate ancestor DOM structures required by production CSS selectors. It also covers preventing flicker from asynchronous DOM reparenting, exposing a component's domNode, and adding options for disabling autofocus or initializing directly in a completed state. At runtime, it instructs the user to start the Component Explorer Server task, call mcp_component-exp_list_fixtures to list fixtures and URLs, and call mcp_component-exp_screenshot to capture screenshots.
- A VS Code frontend developer needs Dark and Light screenshot fixtures for a new UI component and wants to follow the repository's standard structure.
- A component maintainer finds that production CSS depends on deeply nested ancestor selectors and needs to reproduce or refactor that structure for fixture rendering.
- A test author needs to isolate a component's external dependencies and register real implementations or mock service instances through dependency injection.
- A developer performing visual regression checks wants to list component fixtures and capture screenshots programmatically after starting the component explorer.
- An engineer designing a new component wants it to be easy to fixture by avoiding construction-time layout reads, allowing autofocus to be disabled, and exposing a mountable DOM node.
How do you install this skill?
- Before use, verify that mcp_component-exp_* tools are installed and accessible, and confirm that screenshot data will not expose sensitive UI content.
- Failure recovery, rollback, and dependency-version pinning are undocumented; unavailable tools or explorer setup may shift troubleshooting to the user.
- Chinese-language workflow support and mainland-China network reachability are unspecified and should be checked separately.
- Shell / CLI
- Local filesystem
- MCP Server
Component Explorer Server taskVite dev servermcp_component-exp_* tools
This skill is part of the skill collection in the microsoft/vscode repository at .github/skills/component-fixtures/SKILL.md. Keep that file at the stated path; the source does not document a standalone installation command or a separate installation procedure for other clients. To use the full collection, obtain the repository from https://github.com/microsoft/vscode; the supplied source does not specify a repository acquisition command.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/microsoft/vscode.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/.github/skills/component-fixtures" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Give a request such as: Create a component fixture for MyWidget with themed variants, mocked services, and a stable screenshot layout. In the VS Code repository, create or update a .fixture.ts file under src/vs/workbench/test/browser/componentFixtures/ and default-export defineThemedFixtureGroup(...). Start the Component Explorer Server task, use mcp_component-exp_list_fixtures to inspect available fixtures and URLs, and use mcp_component-exp_screenshot to capture screenshots. If the MCP tools are not visible, enable them in the host environment first. The source does not document client-specific configuration steps.
What are this skill's strengths and limitations?
- Covers fixture structure, theming, service registration, CSS scoping, asynchronous rendering, and screenshot stability pitfalls.
- Documents the purpose of the `fixtureUtils.ts` helpers and provides reusable TypeScript patterns.
- Encourages testing the real component code and lifecycle instead of copying or manually recomposing components inside fixtures.
- Supports automatic Dark and Light variants through `defineThemedFixtureGroup`.
- Its scope is tied to the VS Code repository and its component explorer conventions; broader framework compatibility is not established by the source.
- The screenshot workflow requires the Component Explorer Server task and `mcp_component-exp_*` tools, while their installation and configuration are not documented here.
- The source provides no standalone test suite, platform coverage, or screenshot benchmark results.
- The skill provides development guidance and an invocation workflow rather than a standalone fixture generator or screenshot runner.
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Component Fixtures for Screenshot Testing this page ✓ Microsoft · Official | 53 · Use with care | ★ 194k | 11d ago | MIT |
| CI Component Screenshot Baseline Investigator ✓ Microsoft · Official | 37 · Not recommended | ★ 194k | 11d ago | MIT |
| VS Code Agents Window Sessions ✓ Microsoft · Official | 56 · Use with care | ★ 194k | 11d ago | MIT |
| Angular Developer Skill | 63 · Recommended | ★ 685 | 11d ago | — |
| ASP.NET Core Engineering Guide ✓ OpenAI · Official | 54 · Use with care | ★ 28k | 4mo ago | — |
How did FollowSkills review this skill?
The skill scopes activity to creating, updating, and screenshot-testing component fixtures and directs access through named tools; no malicious or destructive behavior is evident, so a relatively high score is justified. It does not explain tool permissions, screenshot data flow, sensitive-data handling, user confirmation, external effects, or rollback, and source attribution is supported only by repository context; 8 points are deducted.
It documents server startup, fixture listing, screenshots, and several rendering patterns, making the main happy path plausible and earning 8 points. Static evidence lacks fixture-specific tests, validation, abnormal-input handling, and diagnostic failure guidance beyond tool unavailability; the phrase “inform the user to them on” is also visibly malformed, so 2 points are deducted.
The front matter and sections identify users, scenarios, locations, naming, and trigger conditions, covering themes, services, asynchronous rendering, and CSS concerns, earning 9 points. Non-fit boundaries, input/output contracts, false-trigger limits, Chinese support, and mainland-China reachability are not addressed; the core screenshot flow depends on potentially unavailable MCP tools, so 6 points are deducted.
The document has clear information architecture, progressive examples, a service table, pitfalls, and design recommendations. Repository context supplies MIT licensing and Microsoft attribution, supporting 8 points. The skill itself lacks versioning, changelog, explicit maintenance ownership, update path, installation notes, and a complete tool setup explanation, so 7 points are deducted.
The guidance is directly useful for structuring fixtures, registering services, handling themes, and preventing screenshot instability; the core task is plausibly supported, earning the static maximum of 7. No representative fixture output, screenshot baseline, or third-party execution evidence is included, and users must still start the environment and invoke tools themselves, so completeness and direct usability remain unverified; 8 points are deducted.
The instructions contain auditable paths and API names, and package.json corroborates the component-explorer dependency, earning 4 points. There is no skill-specific test suite, CI coverage, screenshot baseline, or third-party execution evidence; conclusions therefore rely mainly on documentation claims, so 6 points are deducted.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →