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.
59
67%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./.cursor/skills/create-component/SKILL.mdQuality
Discovery
85%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a strong description that clearly communicates what the skill does and when to use it. The specificity of the Spark UI design system context and the enumeration of generated file types (component, styles, tests, stories, documentation) make it distinctive and actionable. The main weakness is that trigger term coverage could be broader to capture more natural user phrasings.
Suggestions
Add more natural trigger terms users might say, such as 'scaffold', 'generate', 'boilerplate', or 'new widget' to improve discoverability.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: creating component files, styles, tests, stories, and documentation. Clearly describes the complete file structure that will be generated. | 3 / 3 |
Completeness | Clearly answers both 'what' (create a new Spark UI component with complete file structure including component, styles, tests, stories, and documentation) and 'when' (when the user wants to create a new component or add a component to the design system) with explicit trigger guidance. | 3 / 3 |
Trigger Term Quality | Includes natural terms like 'create a new component', 'design system', and 'Spark UI', but misses common variations users might say such as 'scaffold', 'generate', 'boilerplate', 'widget', or file type extensions like '.tsx', '.stories'. | 2 / 3 |
Distinctiveness Conflict Risk | The 'Spark UI' branding and the specific combination of component + styles + tests + stories + documentation makes this clearly distinguishable. The design system context further narrows the niche, making conflicts with generic coding skills unlikely. | 3 / 3 |
Total | 11 / 12 Passed |
Implementation
50%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill provides a solid structural overview for creating Spark UI components with clear file organization and step sequencing. However, it lacks executable code templates (component boilerplate, CVA setup, test template, story template) which significantly limits its actionability. The verification step exists but lacks error recovery guidance, and the content could benefit from supporting bundle files with reusable templates.
Suggestions
Add copy-paste-ready code templates for each file type (ComponentName.tsx, ComponentName.styles.tsx, ComponentName.test.tsx, ComponentName.stories.tsx, index.ts) showing the actual boilerplate with placeholder names.
Add a feedback loop to the verification step: specify what to do when lint, typecheck, or tests fail (e.g., common errors and fixes).
Extract detailed templates and patterns into separate bundle files (e.g., TEMPLATES.md, COMPOUND_COMPONENTS.md) and reference them from the main skill.
Remove the 'When to Use' section—trigger phrase matching is handled by the skill's metadata/description, not the body content.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is reasonably efficient but includes some unnecessary explanation (e.g., 'When to Use' section with trigger phrases Claude doesn't need, and some steps that restate obvious conventions). The file structure diagram and step listing are useful but could be tighter. | 2 / 3 |
Actionability | Provides a clear file structure and step-by-step process, but lacks executable code examples. No actual component template code, CVA usage example, test template, or story template is provided—just descriptions of what to do. For a component creation skill, copy-paste-ready templates would significantly improve actionability. | 2 / 3 |
Workflow Clarity | Steps are clearly sequenced (1-10) with a verification step at the end, but the verification step lacks a feedback loop—there's no guidance on what to do if lint/typecheck/tests fail. For a multi-file creation workflow, explicit validation checkpoints after key steps (e.g., after component implementation, after tests) would improve reliability. | 2 / 3 |
Progressive Disclosure | References existing components as examples (badge, button, card, etc.) which is good, but all content is inline in a single file with no supporting bundle files for templates, detailed patterns, or advanced guidance. The documentation section and compound component section could benefit from separate reference files. | 2 / 3 |
Total | 8 / 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.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Repository
- leboncoin/spark-web
- Commit
76a3678
- 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.