CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

component-fixtures

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.

60

Quality

76%

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

Fix and improve this skill with Tessl

tessl review fix ./.github/skills/component-fixtures/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%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.

The body is exceptionally concrete — exact paths, globs, tools, code patterns, and hard-won pitfalls — and it explains nothing Claude already knows. Its weaknesses are structural: two sections restate the same component-design guidance, the fixture-creation workflow lacks an explicit screenshot-verification checkpoint, everything lives in one long file with no reference split, and one garbled instruction line undermines an otherwise copy-paste-ready document.

Suggestions

Merge "Adapting Existing Components for Fixtures" and "Writing Fixture-Friendly Components" into a single section — they repeat the same four recommendations (shallow CSS, DI, shouldAutoFocus option, exposed domNode).

Add an explicit verification step to the workflow: after screenshotting, inspect the capture (not blank, no intermediate layout state) and iterate on the fixture before finishing.

Move the component-design guidance, the pre-registered services list, and the mocking patterns into a references/ file, keeping SKILL.md as a lean overview with clearly signaled links.

Fix the garbled line "inform the user to them on" so the tool-unavailable fallback is actionable.

DimensionReasoningScore

Conciseness

The body is dense and free of basic-concept padding, but "Adapting Existing Components for Fixtures" and "Writing Fixture-Friendly Components" duplicate the same guidance nearly verbatim — CSS decoupling from ancestor selectors, constructor DI over globals, shouldAutoFocus options, and exposing a public domNode each appear twice across ~100 redundant lines. This is more than the "minor instances" of the 4 anchor, so the content could be meaningfully tightened by merging those sections.

3 / 5

Actionability

Guidance is highly concrete: exact directory paths, the discovery glob ("src/**/*.fixture.ts"), a near copy-paste-ready basic pattern, a utilities table, named MCP tools, and worked mock/register code. Not a 5 because one instruction is unintelligible ("If you cannot see these tools, inform the user to them on" — a garbled sentence the reader cannot act on) and several examples require component-specific placeholders without an explicit note justifying that flexibility.

4 / 5

Workflow Clarity

"Running Fixtures Locally" gives a clear 3-step sequence (start server → list fixtures → screenshot), but the verification checkpoint is implicit: the skill never instructs the reader to inspect the captured screenshot (e.g., for blank or flickered renders) and iterate — a notable gap for a skill whose whole purpose is screenshot correctness. The authoring workflow (create file → render → screenshot → verify) is likewise scattered across sections rather than sequenced, matching the "checkpoints missing or implicit" anchor.

3 / 5

Progressive Disclosure

This is a single ~360-line SKILL.md with no bundle files (no references/, scripts/, or assets/ exist). Sections are well-organized with headers, but substantial self-contained material — the fixture-friendly component design guidance, the pre-registered service list, and the mocking patterns — is inlined where a one-level-deep reference file would keep SKILL.md an overview, matching the "content that should be separate is inline" anchor rather than the well-split 4 anchor.

3 / 5

Total

13

/

20

Passed

Description

83%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: it leads with an explicit "Use when..." clause containing two concrete trigger conditions, states what the skill covers via a specific topic list, and stays in third person without fluff. The main improvement opportunities are broader trigger synonyms (visual testing, .fixture.ts) and tightening the broad "designing UI components" trigger to reduce overlap risk.

Suggestions

Add trigger synonyms and file-level triggers such as "visual testing", "screenshot tests", or ".fixture.ts" files so the skill fires when users name those artifacts.

Qualify the "designing UI components to be fixture-friendly" trigger (e.g., "designing or refactoring UI components in this repo for fixture/screenshot testing") to reduce overlap with generic UI-design requests.

DimensionReasoningScore

Specificity

The description names concrete actions ("creating or updating component fixtures for screenshot testing", "designing UI components to be fixture-friendly") and a specific topic list ("fixture file structure, theming, service setup, CSS scoping, async rendering, and common pitfalls"). It falls short of a 5 because it lists fewer distinct concrete actions than the top anchor and omits activities the body actually covers, such as running/screenshotting fixtures and mocking services.

4 / 5

Completeness

Both what and when are explicit: the "when" is a concrete "Use when creating or updating component fixtures for screenshot testing, or when designing UI components to be fixture-friendly" clause with two distinct trigger conditions, and the "what" is an explicit coverage statement ("Covers fixture file structure, theming, service setup, CSS scoping, async rendering, and common pitfalls"). This matches the top anchor rather than 4, where the "when" would only be adequate rather than fully explicit.

5 / 5

Trigger Term Quality

Natural trigger phrases like "component fixtures", "screenshot testing", "UI components", and "fixture-friendly" match what a user in this codebase would actually say. Not a 5 because common synonyms and file-level triggers are missing — e.g., "visual testing", "screenshot tests", or the ".fixture.ts" file extension that would catch a user pointing at an existing fixture file.

4 / 5

Distinctiveness Conflict Risk

"Component fixtures for screenshot testing" is a clear niche with distinct triggers, unlikely to fire on unrelated skills. Held at 4 rather than 5 because the secondary trigger "designing UI components to be fixture-friendly" is broad enough that general UI component design requests could pull this skill in — a minor overlap risk with closely related design/testing skills.

4 / 5

Total

17

/

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

posit-dev/positron

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.