CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

component-fixtures

Use when creating or updating component fixtures for screenshot testing or their shared infrastructure, or when designing UI components to be fixture-friendly. Covers fixture file structure, theming, service setup, CSS scoping, async rendering, validation, and common pitfalls.

Quality

85%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

71%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A dense, highly actionable body packed with non-obvious domain knowledge (async readiness, CSS scoping, isolation limits) and concrete code. Its weaknesses are the duplication between the two fixture-friendly-component sections and the absence of any progressive disclosure — everything lives in one long SKILL.md.

Suggestions

Merge "Adapting Existing Components for Fixtures" and "Writing Fixture-Friendly Components" into one section (or a short checklist plus one worked example) — they cover the same four adaptations (shallow CSS, DI, auto-focus option, exposed domNode) twice.

Move the "Learnings" anecdotes and the detailed component-adaptation patterns into a references/ file (e.g., ADAPTATIONS.md) linked from a brief pointer in SKILL.md, keeping the main file focused on writing and validating fixtures.

Present one end-to-end workflow sequence (create file → define group → render with readiness condition → screenshot → validate at CI boundary) near the top so the multi-step process is explicit rather than distributed across sections.

DimensionReasoningScore

Conciseness

Most content earns its place (readiness conditions, pitfalls, exact tool names), but "Adapting Existing Components for Fixtures" and "Writing Fixture-Friendly Components" substantially duplicate each other — CSS decoupling, DI, auto-focus options, and exposing domNode are each explained twice with before/after examples. This is 'mostly efficient but could be tightened' rather than level 2, since little of the material explains concepts Claude already knows.

3 / 5

Actionability

Fully executable guidance throughout: exact file paths and glob patterns, named MCP tools (mcp_component-exp_list_fixtures, mcp_component-exp_screenshot), copy-paste TypeScript patterns, a utilities table with per-export purposes, and a referenced real example (sessionsListFixtureUtils.ts). Specific examples cover the common cases (basic group, variants, mocks, icon themes).

5 / 5

Workflow Clarity

The run-locally steps are numbered with concrete tool calls, and validation is taken seriously (bounded condition-based waits that throw, hash comparison at the CI readiness boundary, folder-level preview for mount-order races). It falls short of level 5 because the end-to-end fixture workflow (write → render → screenshot → validate) is never presented as one sequence; the reader assembles it from separate sections.

4 / 5

Progressive Disclosure

No bundle files exist (no references/, scripts/, or assets/), so ~400 lines of content load as one monolithic document. Section headers, an anchored cross-link, and the utilities table give it real structure, but content that plausibly belongs in reference files (the component-adaptation patterns, the Learnings section, the full pre-registered service list) is inlined — matching the level-3 anchor of 'some structure but could be better organized'.

3 / 5

Total

15

/

20

Passed

Description

92%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description: third-person voice, explicit 'Use when' triggers covering authoring, updating, and design-time use, and a concrete coverage list. The only weakness is modest keyword variation (e.g., 'visual testing', 'screenshot tests').

DimensionReasoningScore

Specificity

The description lists concrete actions ("creating or updating component fixtures", "designing UI components to be fixture-friendly") and comprehensively enumerates coverage areas ("fixture file structure, theming, service setup, CSS scoping, async rendering, validation, and common pitfalls"). Multiple specific capabilities with comprehensive coverage; it is not the level-4 anchor because there are no meaningful coverage gaps.

5 / 5

Completeness

Both what ("Covers fixture file structure, theming, service setup, CSS scoping, async rendering, validation, and common pitfalls") and when ("Use when creating or updating component fixtures... or when designing UI components to be fixture-friendly") are explicitly and concretely answered with three distinct trigger scenarios. Matches the level-5 anchor; level 4 would require the 'when' to be less explicit, which it is not.

5 / 5

Trigger Term Quality

Natural domain terms are present ("component fixtures", "screenshot testing", "UI components", "fixture-friendly"), which users in this domain would actually say. It falls short of the level-5 anchor because common variations like "screenshot tests", "visual testing", or "component explorer" are missing.

4 / 5

Distinctiveness Conflict Risk

"Component fixtures" plus "screenshot testing" defines a clear niche with distinct triggers; minimal risk of firing for unrelated skills. It does not sit between anchors — the trigger terms are specific enough to avoid the overlap described at level 4.

5 / 5

Total

19

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

microsoft/vscode

Path

.github/skills/component-fixtures/SKILL.md

Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.