CtrlK
BlogDocsLog inGet started
Tessl Logo

create-component

Create a new Spark UI component with complete file structure including component, styles, tests, stories, and documentation. Use when the user wants to create a new component or add a component to the design system.

68

Quality

81%

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

75%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 well-structured, mostly lean creation workflow with concrete file structure, frameworks, and a final verification step. It lacks a copy-paste code template and an explicit error-recovery loop, which cap actionability and workflow clarity at 4.

Suggestions

Add a minimal copy-paste component/stories code template so Claude has an executable starting point rather than only referencing existing components.

Turn the Verify step into an explicit feedback loop (e.g., 'If lint/typecheck/tests fail, fix and re-run before proceeding') to strengthen workflow clarity.

Trim the redundant opening line ('following the project's standards and file structure') which restates the H1 and adds no new information.

DimensionReasoningScore

Conciseness

The body is lean and assumes Claude's competence (brief directives, file tree, command list); minor padding like the redundant intro line 'following the project's standards and file structure' keeps it just below 5.

4 / 5

Actionability

Concrete file names, frameworks (Vitest + RTL, CVA, Storybook CSF), patterns (Object.assign, asChild), and commands (npm run lint/typecheck) are given, but no copy-paste component code template is included, leaving a minor gap.

4 / 5

Workflow Clarity

A clearly sequenced 10-step workflow ends in an explicit Verify step (lint, typecheck, tests, Storybook); not a destructive or batch operation so the cap does not apply, but there is no explicit error-recovery feedback loop.

4 / 5

Progressive Disclosure

Well-organized into When to Use, Instructions, and Examples sections with one-level references to existing repo components and no nested references; no bundle files exist, so structure is self-contained and clean, just without the ideal separate-reference split that would reach 5.

4 / 5

Total

16

/

20

Passed

Description

87%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 clear, third-person description that explicitly answers both what it does and when to invoke it, with concrete trigger phrases and a distinct niche. Trigger-term and specificity coverage are strong but not exhaustive, capping those dimensions at 4.

DimensionReasoningScore

Specificity

Lists multiple concrete deliverables ('component, styles, tests, stories, and documentation') under one create action; comprehensive artifact coverage but a single verb keeps it just below a 5.

4 / 5

Completeness

Explicitly states what ('Create a new Spark UI component with complete file structure...') and when ('Use when the user wants to create a new component or add a component to the design system') with concrete trigger phrases.

5 / 5

Trigger Term Quality

Natural phrases users would say ('new component', 'add a component', 'design system') are present, but a few common synonyms or variations are missing.

4 / 5

Distinctiveness Conflict Risk

Tightly scoped to 'Spark UI component' and 'design system', a clear niche with distinct triggers and minimal overlap with unrelated skills.

5 / 5

Total

18

/

20

Passed

Validation

100%

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

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
leboncoin/spark-web
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.