CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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
SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

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

The canonical home for this skill is component-testing in fernandezbaptiste/Skrillz

SKILL.md
Quality
Evals
Security

Quality

Content

65%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 highly actionable, code-first reference whose examples are executable and cover the common component-testing cases well. Its weaknesses are structural: the SKILL.md body duplicates content that already lives in the bundled reference files instead of pointing to them, and the setup workflow lacks explicit sequencing and verification checkpoints.

Suggestions

Move the per-framework example sections (React/Vue/Svelte patterns: props, event handlers, context providers, slots, Pinia, etc.) into the existing references/react-patterns.md and references/vue-patterns.md, keeping one compact Quick Start-style example per framework in SKILL.md to eliminate the duplication and shrink the body.

Add an explicit ordered workflow — install → configure → verify with a smoke test → run — including a checkpoint that confirms the Playwright CT setup works before writing full test suites.

Surface the reference file pointers next to each framework section (or immediately after Quick Start) rather than only in a References section at the very bottom, so readers know deeper patterns exist before wading through inlined material.

DimensionReasoningScore

Conciseness

Prose is lean and assumes competence, but the ~410-line body inlines extensive per-framework example sections ('React Component Testing', 'Vue Component Testing', 'With Props', 'With Context Providers', etc.) that duplicate material in the shipped references/react-patterns.md and references/vue-patterns.md — it could be tightened by pushing that detail to the existing references.

3 / 5

Actionability

Nearly all guidance is complete, executable code: install commands ('npm install -D @playwright/experimental-ct-react'), a full playwright-ct.config.ts, and runnable test snippets covering the common cases (mount, props, event handlers, context, slots, visual regression, a11y, responsive, loading/error states, fixtures, custom mounts). Only trivial gaps exist (omitted imports in mid-section snippets), fitting the 'fully executable; specific examples cover the common cases' anchor.

5 / 5

Workflow Clarity

An install → configure → write → run sequence is implicit in section ordering (Installation, Configuration, Running Tests), but there is no explicit step sequencing and no validation checkpoints (e.g., verifying the CT setup works with a smoke test before writing suites) — 'sequence present but checkpoints missing or implicit.'

3 / 5

Progressive Disclosure

The bundle's references (references/react-patterns.md, references/vue-patterns.md) are real, one-level-deep files listed in a dedicated References section, but the body inlines large framework-specific sections that overlap those files, and the pointers appear only at the very end — 'references present but not clearly signaled; content that should be separate is inline.'

3 / 5

Total

14

/

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 clearly states what the skill does and when to use it in third person with concrete framework names and explicit trigger phrases. The only weaknesses are mild — action verbs are variations on 'testing' rather than distinct operations, and a few natural synonyms are missing.

DimensionReasoningScore

Specificity

Names the domain concretely ('Isolated component testing for React, Vue, and Svelte with Playwright') and lists several actions ('testing UI components in isolation, testing component interactions, or building component test suites'), but these are variations on a single verb rather than distinct operations like extract/fill/merge — a minor coverage gap consistent with the 'several specific actions; minor gaps' anchor.

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, exactly matching the top anchor.

5 / 5

Trigger Term Quality

Good natural keyword coverage users would actually say ('component testing', 'React', 'Vue', 'Svelte', 'Playwright', 'UI components', 'isolation'), but common variations and synonyms are missing (e.g., 'unit testing', 'component tests', '.spec.tsx' patterns), matching the 'good keyword coverage; a few natural terms missing' anchor.

4 / 5

Distinctiveness Conflict Risk

The 'isolated component testing' niche with named frameworks and Playwright is mostly distinct, but generic 'testing' triggers could overlap with a Playwright E2E or unit-testing skill — minor overlap risk with closely related skills rather than the minimal-conflict top anchor.

4 / 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

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository

fernandezbaptiste/Skrillz

Path

.claude/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.