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.

80

Quality

100%

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

100%

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 tight, well-sequenced checklist with concrete file structure, styling, testing, and documentation guidance plus an explicit verification step. It assumes Claude's competence and avoids unnecessary explanation, though the Verify step could spell out a fix-and-retry loop.

DimensionReasoningScore

Conciseness

Lean, action-oriented steps with no padding or explanation of concepts Claude already knows; every bullet (CVA, ARIA, asChild, file tree) earns its place.

3 / 3

Actionability

Gives exact file names, a copy-paste file-tree template, concrete commands ('npm run lint', 'npm run typecheck'), and an explicit documentation section order — actionable scaffolding even without a full code sample.

3 / 3

Workflow Clarity

A clear 10-step sequence culminating in an explicit 'Verify' checkpoint (lint, typecheck, test, Storybook); this is a creation workflow so the destructive/batch feedback-loop cap does not apply.

3 / 3

Progressive Disclosure

Well-organized into When to Use, Instructions, and Examples with a single one-level reference to existing project components; no bundle files exist and the self-contained content is appropriately structured.

3 / 3

Total

12

/

12

Passed

Description

100%

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 concise, uses third person, names concrete deliverables, and includes an explicit 'Use when' trigger clause scoped to the Spark design system. It clearly answers both what the skill does and when to invoke it.

DimensionReasoningScore

Specificity

Lists multiple concrete deliverables — 'component, styles, tests, stories, and documentation' — naming the specific files created, matching the anchor for multiple specific concrete actions.

3 / 3

Completeness

Explicitly answers both what (create a Spark UI component with full file structure) and when (an explicit 'Use when...' clause), satisfying the top anchor.

3 / 3

Trigger Term Quality

'Use when the user wants to create a new component or add a component to the design system' supplies natural phrases a user would actually say; not jargon or generic.

3 / 3

Distinctiveness Conflict Risk

Scoped to 'Spark UI component' and 'design system', a clear niche with distinct triggers unlikely to collide with unrelated skills.

3 / 3

Total

12

/

12

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.