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

79%

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 ./skills/component-testing/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

71%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 highly actionable, with executable code from installation through running tests, and a sensible section flow. Its weaknesses are redundancy and organization: the React and Vue pattern sections substantially duplicate the bundled reference files instead of pointing to them, costing both token efficiency and clean progressive disclosure. Consolidating those sections into the references would resolve both issues at once.

Suggestions

Replace the inline 'React Component Testing' and 'Vue Component Testing' sections with 1-2 quick-start examples each and point to references/react-patterns.md and references/vue-patterns.md for the rest, since those files already cover mounts, props, context providers, slots, and store testing.

Move the Testing Patterns section (visual regression, accessibility, responsive, loading/error states) into a shared reference file, keeping only short one-line pointers in SKILL.md.

Add a brief verification step after Installation/Configuration (e.g., run one sample test to confirm the ctPort and Vite config work) to close the workflow's validation gap.

DimensionReasoningScore

Conciseness

The prose is lean and code dominates, but the body inlines roughly 150 lines of React and Vue pattern examples (basic mounts, props, context providers, slots, Pinia) that duplicate sections already present in references/react-patterns.md and references/vue-patterns.md. This is 'mostly efficient but could be tightened' — more than minor trimming (ruling out 4), yet not padded with explanations of concepts Claude already knows (ruling out 2).

3 / 5

Actionability

Every section gives copy-paste executable material: install commands (npm install -D @playwright/experimental-ct-react), a complete playwright-ct.config.ts, working mount/assertion examples across React, Vue, and Svelte, fixtures via base.extend, and run/update-snapshot commands. The examples cover the common cases exactly as the top anchor requires.

5 / 5

Workflow Clarity

Installation -> Configuration -> framework-specific patterns -> Hooks and Fixtures -> Running Tests forms a clear, well-ordered sequence, and the run commands give a concrete feedback step; testing is not a destructive or batch operation, so no validation cap applies. It falls short of 5 because there is no explicit first-run verification or error-recovery checkpoint (e.g., what to do when the ctPort is taken or a framework is misconfigured).

4 / 5

Progressive Disclosure

The two references are real, clearly signaled in a References section, and one level deep — but the body inlines the very React/Vue pattern content that those reference files contain, which is the anchor-3 condition of 'content that should be separate is inline'. Not 4 because the duplication is a real organizational gap rather than minor; not 2 because structure is good and the references are not buried.

3 / 5

Total

15

/

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 description with an explicit 'Use when...' trigger clause, natural trigger phrasing, third-person voice, and a well-defined niche. The main weakness is that the 'what' is a single bundled action rather than a list of concrete capabilities, leaving the specificity dimension mid-scale.

DimensionReasoningScore

Specificity

"Isolated component testing for React, Vue, and Svelte with Playwright" names the domain, the tool, and one concrete action, matching the 'domain and 1-2 concrete actions, but not comprehensive' anchor. It does not list several distinct actions (no mount/assert/visual/a11y capabilities), so it stays below 4, and it goes beyond bare domain-naming like 'Processes PDF files' thanks to the named frameworks, so it stays above 2.

3 / 5

Completeness

It clearly answers 'what' ("Isolated component testing for React, Vue, and Svelte with Playwright") and explicitly answers 'when' with a "Use when..." clause containing concrete triggers (testing UI components in isolation, testing component interactions, building component test suites). It is written in third person throughout, so no voice penalty applies; this matches the top anchor.

5 / 5

Trigger Term Quality

Phrases like "testing UI components in isolation", "testing component interactions", and "building component test suites" are natural things a user would say when they need this skill, and framework names (React, Vue, Svelte, Playwright) aid matching. A few natural variations (e.g., 'unit testing components', '.spec files') are missing, so it does not reach the comprehensive-synonym coverage of 5.

4 / 5

Distinctiveness Conflict Risk

The isolation-focused triggers ("testing UI components in isolation") carve out a clear niche distinct from general end-to-end testing skills, with only minor overlap risk against a general Playwright/E2E skill. Not 5: the mention of Playwright and generic 'component interactions' could still pull requests aimed at plain browser E2E tests.

4 / 5

Total

16

/

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

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.