component-testing

Isolated component testing for React, Vue, and Svelte with Playwright. Use when testing UI components in isolation, testing component interactions, or building component test suites.

Quality

78%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/component-testing/SKILL.md

Quality

Content

72%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 a strong, highly actionable catalog of executable component-testing patterns across React, Vue, and Svelte, with lean code-first content. Its main weaknesses are the lack of an explicitly sequenced setup-to-run workflow with validation checkpoints and under-signaled, footer-only references plus an unsupported Solid mention.

Suggestions

Add a short numbered workflow (1. install per framework, 2. create playwright-ct.config.ts, 3. write a spec, 4. run and read failures) with a verification checkpoint so the end-to-end sequence is explicit.

Link each framework's reference inline from its section (e.g. 'See references/react-patterns.md for more React patterns') instead of only listing them in the footer References section.

Resolve the Solid inconsistency: either add a Solid installation/section and reference, or drop 'Solid' from the intro so supported frameworks match the body.

Dimension	Reasoning	Score
Conciseness	The body is mostly lean code examples with minimal prose and little explanation of concepts Claude already knows; section bodies are near-pure code blocks (e.g. 'test(\'button click triggers callback\', async ({ mount }) => { ... })') with only brief headers and short Best Practices bullets. It earns a 4 rather than 5 because there is some redundancy across framework sections (e.g. React basic mount vs. props vs. event handlers overlap) and the configuration block is duplicated in the references.	4 / 5
Actionability	Provides fully executable, copy-paste-ready code and commands throughout — installation commands ('npm install -D @playwright/experimental-ct-react'), a complete config block, mount/props/event/provider/slot examples, and run commands ('npx playwright test -c playwright-ct.config.ts') — covering the common cases comprehensively.	5 / 5
Workflow Clarity	The constituent steps exist across sections (Installation, Configuration, write spec, Running Tests) but they are presented as a reference catalog rather than an explicitly sequenced workflow, and validation checkpoints/feedback loops (e.g. verify install, validate config) are absent or only implicit; not a 2 because the pieces are present and loosely ordered, not a 4 because no explicit checkpoints are given.	3 / 5
Progressive Disclosure	Section structure is clear and the two referenced files (references/react-patterns.md, references/vue-patterns.md) are real and one level deep, but they are only listed in a footer References section rather than signaled from the relevant React/Vue sections, and substantial framework detail is inlined; additionally 'Solid' is named in the intro but has no section or reference, leaving a navigation gap.	3 / 5
	Total	15 / 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.

The description is well-crafted: it states what the skill does, names the supported frameworks, and provides an explicit 'Use when' clause with concrete trigger phrases in third person. It is strong on completeness and only slightly less definitive on distinctiveness and trigger synonym coverage.

Dimension	Reasoning	Score
Specificity	Names the domain and frameworks concretely ('Isolated component testing for React, Vue, and Svelte with Playwright') and lists several specific testing actions ('testing UI components in isolation, testing component interactions, building component test suites'), with only minor coverage gaps; not a 5 because the actions are all variants of 'testing' rather than distinct concrete operations.	4 / 5
Completeness	Explicitly answers both what ('Isolated component testing for React, Vue, and Svelte with Playwright') and when ('Use when testing UI components in isolation, testing component interactions, or building component test suites') with concrete trigger phrases, matching the top anchor; uses third person voice with no person-pronoun penalty.	5 / 5
Trigger Term Quality	Includes natural phrases a user would say ('testing UI components in isolation', 'testing component interactions', 'building component test suites', 'component test suites'); good coverage but a few natural synonyms (e.g. 'unit testing components', 'isolated component tests') are missing, so not a 5.	4 / 5
Distinctiveness Conflict Risk	The Playwright + isolated + React/Vue/Svelte combination is a clear niche with distinct triggers, but the broad phrase 'testing UI components' carries minor overlap risk with general or E2E testing skills, so it stops at 4 rather than 5.	4 / 5
	Total	17 / 20 Passed

Validation

93%

Warnings & errors only

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

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	15 / 16 Passed

Repository: fernandezbaptiste/Skrillz
Path: skills/component-testing/SKILL.md
Commit: 93ed392

Reviewed: 1 day ago

Table of Contents

Discovery Implementation Validation

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.