CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

react-testing

React component testing with React Testing Library, Vitest/Jest, MSW for network mocking, accessibility assertions with axe, and the decision boundary between component tests and Playwright/Cypress end-to-end runs. Use when writing or fixing tests for React components, hooks, or pages.

Quality

88%

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

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

Highly actionable, executable content with excellent pattern coverage and clear decision boundaries, written economically. Its main structural weakness is that it is entirely monolithic — no bundle files exist, so example tests and deep-dive setup material live inline in an oversized SKILL.md instead of being split into one-level-deep references.

Suggestions

Move the three full example tests and the MSW setup/override details into a references/ file (e.g., references/examples.md and references/msw.md), keeping SKILL.md as a lean overview with clearly signaled links.

Trim or cut the 'TDD Workflow' section — RED/GREEN/REFACTOR is knowledge Claude already has; keep only the React-specific ordering advice.

Add an explicit validation checkpoint to the library-selection and coverage-threshold guidance (e.g., how to confirm thresholds pass in CI) to strengthen workflow feedback loops.

DimensionReasoningScore

Conciseness

The body is code-first with minimal prose and every section earns its place, but a few sections explain what Claude already knows — the 'RED -> GREEN -> REFACTOR -> REPEAT' TDD basics and the rationale for why snapshot tests break — fitting anchor 4 (efficient, minor trimmable over-explanation) rather than 5.

4 / 5

Actionability

Fully executable throughout: complete setupServer handlers with lifecycle hooks, a copy-paste renderWithProviders utility, per-test MSW overrides, concrete commands like 'CI=true vitest run --coverage', and three complete example tests covering forms, error boundaries, and Suspense. Matches anchor 5 (copy-paste ready, common cases covered).

5 / 5

Workflow Clarity

The TDD sequence has an explicit checkpoint ('Verify it fails for the right reason') and the query-priority tiers plus the RTL / Playwright CT / E2E decision boundary are unambiguous, but most other guidance is pattern-shaped rather than sequenced, with validation only implicit — anchor 4 (clear sequence, most checkpoints, minor validation gaps) rather than 5.

4 / 5

Progressive Disclosure

No references/, scripts/, or assets/ files exist, so all material — the full MSW setup guide, coverage config, and three complete example tests — is inlined in one ~425-line SKILL.md. Section headers are clear and cross-links to sibling skills are well signaled (not anchor 2), but substantial reference-grade content that belongs in separate files is inline, matching anchor 3.

3 / 5

Total

16

/

20

Passed

Description

96%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: concrete tool-named capabilities, explicit dual trigger phrases users would naturally say, and comprehensive synonym coverage across runners and frameworks. The only weakness is minor overlap risk with a sibling e2e-testing skill via the Playwright/Cypress and 'pages' mentions.

DimensionReasoningScore

Specificity

Lists multiple concrete capabilities with named tools — 'React component testing with React Testing Library, Vitest/Jest, MSW for network mocking, accessibility assertions with axe, and the decision boundary between component tests and Playwright/Cypress end-to-end runs' — with no notable coverage gaps, matching the anchor-5 comprehensiveness level.

5 / 5

Completeness

Explicitly answers both questions: the first sentence states concretely what the skill does, and 'Use when writing or fixing tests for React components, hooks, or pages' gives explicit trigger guidance, exactly matching the anchor-5 example structure.

5 / 5

Trigger Term Quality

Covers the natural phrases users would say — 'writing or fixing tests', 'React components, hooks, or pages', 'network mocking' — plus tool synonyms on both sides (Vitest/Jest, Playwright/Cypress), matching the anchor-5 example's synonym-and-variation coverage. Not 4: no common variation is obviously missing.

5 / 5

Distinctiveness Conflict Risk

The 'React component testing' niche is clear and the decision-boundary framing is distinctive, but 'Playwright/Cypress end-to-end runs' in the what-clause and 'pages' in the when-clause create minor overlap risk with a closely related e2e-testing skill, fitting anchor 4 better than 5.

4 / 5

Total

19

/

20

Passed

Validation

87%

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

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

relative_links

Relative link issues: 7 suspicious

Warning

Total

14

/

16

Passed

Repository

affaan-m/ECC

Path

skills/react-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.