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

86%

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

82%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 lean, highly actionable skill body: exact file structure, paths, and verification commands with zero padding. Its only gaps are small — an unspecified test command, no error-recovery loop in Verify, and no bundled reference template despite pointing at existing components.

DimensionReasoningScore

Conciseness

The body is a lean checklist — no concept explanations (no 'what is CVA', no library tutorials), no padded sections, no repeated context. Every line is an instruction, matching anchor 5 ('every token earns its place'). Not 4 because there are no trimmable over-explanations anywhere.

5 / 5

Actionability

Concrete paths ("packages/components/src/<component-name>/"), an exact file-structure tree, and exact commands ("npm run lint", "npm run typecheck") with minor gaps — "Run tests to ensure they pass" lacks the actual command and no starter code template is provided. Matches anchor 4; not 5 because guidance is not fully copy-paste ready throughout.

4 / 5

Workflow Clarity

Steps 1–10 are clearly sequenced and end in an explicit Verify step with two concrete commands plus Storybook and test checks — anchor 4. Not 5 because there is no error-recovery feedback loop (e.g. 'if lint fails, fix and re-run'); this is a generative, non-destructive task so the validation cap does not apply.

4 / 5

Progressive Disclosure

A self-contained SKILL.md with no bundle files (references/, scripts/, assets/ are absent) and well-organized sections; its example pointers ("badge/", "button/", "combobox/") reference real repo paths one level deep, clearly signaled. Anchor 4 rather than 5 because the body (~82 lines) exceeds the under-50-line allowance and the Examples section could point to a concrete reference component template in a bundle file.

4 / 5

Total

17

/

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 states a concrete capability with a comprehensive artifact list and pairs it with an explicit 'Use when...' trigger clause. The only weakness is that its trigger terms are not fully niche-qualified, leaving minor overlap risk with generic component-creation requests.

DimensionReasoningScore

Specificity

Lists concrete deliverables ("component, styles, tests, stories, and documentation") but the action itself is a single one — "Create a new Spark UI component" — so it matches anchor 4 (several specifics, minor gaps) rather than anchor 5's multiple distinct actions. It is well above anchor 3 since the artifact coverage is comprehensive.

4 / 5

Completeness

Explicitly answers both what ("Create a new Spark UI component with complete file structure including component, styles, tests, stories, and documentation") and when ("Use when the user wants to create a new component or add a component to the design system") with concrete trigger phrases — a direct match for the anchor-5 example pattern. Not 4 because the 'when' clause is fully explicit, not just present.

5 / 5

Trigger Term Quality

Natural phrases present: "create a new component", "add a component to the design system" — these are phrases users would actually say. A few natural variations (e.g. "new UI component", "implementing from a design") that appear in the body are missing from the description, matching anchor 4 rather than 5.

4 / 5

Distinctiveness Conflict Risk

"Spark UI" and "design system" ground it in a clear niche, but the trigger phrase "create a new component" is generic enough to fire for component requests in non-Spark projects — minor overlap risk with closely related skills, matching anchor 4. Not 5 because the unqualified 'new component' trigger is not niche-distinct.

4 / 5

Total

17

/

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.

Validation — 16 / 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.