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

88%

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

93%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 strong, tight skill body: it delegates project conventions to the architecture doc, gives a concrete decision tree for file placement, a complete SFC template, and an explicit validation command. The only meaningful gap is the absence of an error-recovery loop after `nuxi typecheck` fails.

DimensionReasoningScore

Conciseness

The body is lean with no explanations of concepts Claude already knows; template comments like "In Nuxt, Vue APIs and composables are auto-imported / NO import statements needed" convey project-specific constraints rather than padding. Every line (paths, template, checklist, command) earns its place.

5 / 5

Actionability

Concrete file paths for all three component types ("modules/[module]/components/ComponentName.vue", "components/ComponentName.vue", "pages/[route]/index.vue"), a complete copy-paste Vue SFC template, and a specific validation command "nuxi typecheck" fully cover the common cases. The placeholder interfaces are intentional scaffolding parameters, not gaps.

5 / 5

Workflow Clarity

A clear 5-step sequence with a checklist (step 4) and an explicit validation step (step 5: "nuxi typecheck"), but no error-recovery feedback loop telling Claude what to do if typecheck fails. Anchor 4 ("clear sequence with most checkpoints present; minor validation gaps") fits better than 5, which requires fix-and-retry loops.

4 / 5

Progressive Disclosure

No bundle files exist (references/, scripts/, assets/ are absent), and the ~50-line body is well organized with a Steps section, numbered list, and fenced template; the sole reference to "docs/ARCHITECTURE.md section 5" is one level deep and clearly signaled. Per the simple-skill guideline, well-organized sections alone merit a 5.

5 / 5

Total

19

/

20

Passed

Description

80%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 concise, well-structured description that clearly states both what the skill does and when to use it, with a natural trigger phrase. Its main weaknesses are the unnamed framework (raising conflict risk with other component-creation skills and missing natural trigger terms) and a test-scaffolding claim the body does not actually cover.

Suggestions

Name the framework in the description (e.g., "Create a Nuxt/Vue component...") to reduce conflict risk with component-creation skills for other frameworks and add the natural trigger terms "Vue", "Nuxt", and ".vue".

Replace the generic verb "handles" with concrete actions, e.g., "Scaffolds the .vue file with typed props/emits, places it by component type, and validates with nuxi typecheck".

Align the description's "test scaffolding" claim with the body — either add a test-scaffolding step to the workflow or drop the claim.

DimensionReasoningScore

Specificity

"handles templates, props, and test scaffolding" lists three concrete capability areas, matching anchor 4 ("Lists several specific actions; minor gaps in coverage"). Not 5 because the verb "handles" is generic and coverage of the actual workflow (file placement by component type, typecheck validation) is incomplete.

4 / 5

Completeness

Explicitly answers both: what ("handles templates, props, and test scaffolding") and when ("Use when adding a new UI component to an existing module") with a concrete trigger phrase. Anti-drift check: anchor 4's deficit ("'when' could be more explicit or specific") does not apply — the when clause is specific — so anchor 5 is the best fit.

5 / 5

Trigger Term Quality

"adding a new UI component to an existing module" is a natural phrase a user would say, plus "templates, props" — good coverage matching anchor 4. Not 5 because framework terms users would naturally say ("Vue", "Nuxt", ".vue", "create/build a component") are missing; not 3 because the core natural phrasing is present rather than just generic keywords.

4 / 5

Distinctiveness Conflict Risk

"UI component" is generic across frontend frameworks; without naming Nuxt/Vue, the description would equally match a React or Angular component-creation skill — "Somewhat specific but could still overlap with similar skills" (anchor 3). Not 4 because the overlap risk with closely related component-scaffolding skills is more than minor given the framework is unnamed.

3 / 5

Total

16

/

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/nuxt/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.