CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

dev-create-component

Use when adding a new UI component to an existing module - handles templates, props, and test scaffolding.

Quality

78%

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 ./packs/vue/skills/dev-create-component/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

86%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 an exemplary lean skill: concrete paths, a ready-to-use template, a typed-props checklist, and an explicit validation command, with project-specific rules properly delegated to docs/ARCHITECTURE.md. The only real gaps are the missing test-scaffolding step promised in the description and the absence of an error-recovery loop after validation.

DimensionReasoningScore

Conciseness

The body is entirely lean — no concept explanations, no padding; every line carries project-specific information Claude cannot infer (paths, house template, house rules), matching 'lean and efficient; assumes Claude's competence; every token earns its place'.

5 / 5

Actionability

Concrete file paths, a copy-paste Vue SFC template, and a specific validation command ('npx tsc --noEmit') provide mostly executable guidance. Not 5: the Props/Emits interfaces are placeholder comments, and the description's promised 'test scaffolding' never appears in the body — minor gaps per the anchor-4 definition.

4 / 5

Workflow Clarity

A clear 5-step sequence includes an explicit validation step and a checklist, but there is no feedback loop (no 'if tsc fails, fix and re-run') as in the anchor-5 example, so it fits 'clear sequence with most checkpoints present; minor validation gaps'.

4 / 5

Progressive Disclosure

A short, well-organized single-purpose skill with no bundle files; its only reference (docs/ARCHITECTURE.md section 5) is one level deep and clearly signaled, appropriately deferring architecture rules to the project doc — matching the simple-skill case for a top score.

5 / 5

Total

18

/

20

Passed

Description

62%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.

The description has a clear, explicit 'Use when' trigger and a recognizable niche, but the capability statement leans on the generic verb 'handles' and omits framework-specific trigger terms like 'Vue' or '.vue'. It sits comfortably above the midpoint but below the comprehensive, action-verb-driven examples.

Suggestions

Replace the vague verb 'handles' with concrete actions, e.g. 'Creates Vue component files with a typed <script setup> template, props/emits scaffolding, and test scaffolding'.

Add framework-specific trigger terms users would naturally say: 'Vue', '.vue file', 'new component', 'shared component', 'view'.

State the tech stack (Vue 3 + TypeScript) in the description so it cannot be confused with component-creation skills for other frameworks.

DimensionReasoningScore

Specificity

Names the domain ('UI component', 'existing module') and items ('templates, props, and test scaffolding'), but the generic verb 'handles' replaces concrete actions, matching 'names domain and 1-2 concrete actions, but not comprehensive' rather than the several-specific-actions anchor at 4.

3 / 5

Completeness

Both parts are present: an explicit 'Use when adding a new UI component to an existing module' trigger and a what ('handles templates, props, and test scaffolding'). Not 5 because the 'what' uses the vague verb 'handles' instead of the concrete action verbs in the anchor-5 example.

4 / 5

Trigger Term Quality

'adding a new UI component' is a natural phrase users would say, but common variations are absent — no 'Vue', '.vue', 'component', or 'create component' — matching 'some relevant keywords but missing common variations or synonyms'.

3 / 5

Distinctiveness Conflict Risk

The niche (new UI component in an existing module) is mostly distinct, but omitting the framework name ('Vue') leaves minor overlap risk with component-creation skills for other frameworks, matching 'mostly distinct; minor overlap risk with closely related skills'.

4 / 5

Total

14

/

20

Passed

Validation

87%

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

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

allowed_tools_field

'allowed-tools' contains unusual tool name(s)

Warning

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

14

/

16

Passed

Repository

fernandezbaptiste/specialist-agent

Path

packs/vue/skills/dev-create-component/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.