CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

component-testing

Use when authoring, modifying, reviewing, or debugging Primer React component and hook tests in Vitest browser mode. Do not use for Node/SSR tests, standalone Playwright visual or accessibility tests, or component implementation without test changes.

Quality

83%

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

82%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 lean, highly actionable conventions document: executable examples, a decision table for assertion choice, and explicit error-recovery guidance for act warnings and failed browser interactions. The main gaps are minor — duplicated locator guidance, no inline write-run-verify sequence, and a sole external reference that is not part of the bundle.

Suggestions

Merge the duplicated locator guidance in 'Use locators for current DOM state' — 'Use an exact accessible name or scope the query to the intended region' and 'Prefer an exact accessible name or a scoped query over `.first()`' restate the same rule in consecutive paragraphs.

The only reference, ../../../contributor-docs/testing.md, lives outside the skill bundle and does not resolve; vendor the essential setup/commands into a references/ file (or inline the key commands) so the skill is self-contained.

Add a brief end-to-end sequence (write test → run in browser mode → verify) with the actual test command, instead of delegating all commands to the external testing guide.

DimensionReasoningScore

Conciseness

Dense conventions with no basic-concept padding (e.g., "Prefer assertions on observable conditions over fixed sleeps" assumes competence throughout), but the locator section states the same rule twice in adjacent paragraphs ("Use an exact accessible name or scope the query to the intended region" then "Prefer an exact accessible name or a scoped query over `.first()`"), which could be merged.

4 / 5

Actionability

Fully executable, copy-paste-ready examples: a complete `it('calls onClick', ...)` test with imports, `act(() => { button.element().focus() })`, and a rerender/detach check, plus a decision table mapping contract to assertion and paired Avoid/Prefer polling snippets — the common cases are covered.

5 / 5

Workflow Clarity

Situation-based guidance is unambiguous with explicit feedback loops ("When an act warning occurs, check that manual updates use RTL's `act`..."; "If a browser action unexpectedly fails... investigate its visibility, enabled state"), but there is no end-to-end write-run-verify sequence — running and verifying tests is delegated to the external testing guide.

4 / 5

Progressive Disclosure

A well-sectioned single file with one clearly signaled one-level reference ("Read [the testing guide](../../../contributor-docs/testing.md) for strategy, environment setup, and commands"), but no bundle files exist (no references/, scripts/, or assets/) and that referenced path points outside the skill bundle and does not resolve, so the skill's one dependency is unverifiable.

4 / 5

Total

17

/

20

Passed

Description

78%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, third-person description with explicit positive and negative trigger guidance in a tightly scoped niche. Its only weakness is that the 'what' is implicit in the activity clause rather than stated as a capability, and a few natural synonyms (React Testing Library, RTL) are missing.

DimensionReasoningScore

Specificity

Names a precise domain and several actions — "authoring, modifying, reviewing, or debugging Primer React component and hook tests in Vitest browser mode" — but the verbs are lifecycle actions rather than the concrete testing capabilities the skill actually covers (assertion selection, locators, act handling), so coverage has minor gaps.

4 / 5

Completeness

The 'when' is fully explicit with concrete positive and negative triggers ("Use when authoring...", "Do not use for Node/SSR tests..."), but the 'what' is conveyed only through the trigger activity — there is no separate statement of what the skill provides. Not 3 because 'when' is explicit and specific rather than weakly implied.

4 / 5

Trigger Term Quality

Good natural-term coverage: "component and hook tests", "Vitest browser mode", "Primer React", "Playwright visual or accessibility tests" are phrases a repo user would say. It is not 5 because common variants like "React Testing Library", "RTL", or "unit tests" are absent.

4 / 5

Distinctiveness Conflict Risk

A clear niche ("Primer React", "Vitest browser mode") with active disambiguation of the nearest neighbors ("Do not use for Node/SSR tests, standalone Playwright visual or accessibility tests, or component implementation without test changes"), giving minimal conflict risk.

5 / 5

Total

17

/

20

Passed

Validation

93%

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

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 1 suspicious

Warning

Total

15

/

16

Passed

Repository

primer/react

Path

.agents/skills/component-testing/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.