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

76%

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/nextjs/skills/dev-create-component/SKILL.md
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.

The body is an efficient, highly actionable scaffold: lean templates, a concrete decision tree, and a typed validation step with almost no wasted tokens. The main gaps are the missing test-scaffolding step promised by the description, the absence of a fix-and-revalidate loop after `tsc --noEmit`, and a minor inconsistency between the template comment ("< 100 lines") and the checklist ("< 200 lines total").

Suggestions

Add the promised test-scaffolding step (e.g. create `ComponentName.test.tsx` alongside the component with a rendered smoke test), since the description advertises it but no step covers it.

Close the validation loop: after `npx tsc --noEmit`, instruct to fix type errors and re-run until it passes before finishing.

Reconcile the line-limit guidance — the templates say "< 100 lines" while the checklist says "< 200 lines total" — and move the two templates into a clearly labeled section or reference file for easier navigation.

DimensionReasoningScore

Conciseness

The body is lean and assumes Claude's competence: no React/TSX concept explanations, a terse decision tree, two compact templates, a checklist, and one validation command. It matches anchor 5 — every token earns its place — with nothing to trim down to anchor 4's 'minor instances of over-explanation'.

5 / 5

Actionability

Concrete, near-executable guidance: two full TSX templates, a deterministic server-vs-client decision tree, file-path conventions, and a runnable `npx tsc --noEmit` check. Not anchor 5 because the templates require placeholder substitution (XxxComponent, xxx.contracts), "Loading / error / empty states handled" is vague direction, and the test scaffolding promised in the description never appears in any step.

4 / 5

Workflow Clarity

A clear 7-step sequence with an explicit validation checkpoint ("Validate: npx tsc --noEmit") and a supporting checklist, matching anchor 4. It misses anchor 5 because there is no feedback loop — no instruction on what to do when tsc fails (fix and re-validate) — and the checklist's vague items leave some checkpoints implicit.

4 / 5

Progressive Disclosure

Well-organized numbered sections with a single clearly signaled one-level-deep reference (`docs/ARCHITECTURE.md`), and no bundle files to misplace content. It fits anchor 4's 'good structure; minor organization gaps' rather than 5: the ~76-line body exceeds the under-50-line simple-skill exception, and the two full templates inlined mid-workflow would sit more cleanly in their own sections or reference files.

4 / 5

Total

17

/

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 is short, third-person, and includes an explicit 'Use when...' trigger with a scoped scenario, which puts it above the midpoint. Its weaknesses are the vague verb 'handles', no mention of React despite the skill being React-specific, and missing natural synonyms that would improve trigger matching and distinctiveness.

Suggestions

Replace the vague verb with concrete actions, e.g. "Creates React component files with typed props, 'use client' directives where needed, and test scaffolding, following the project's architecture conventions."

Add natural trigger keywords and synonyms such as "React component", "new component", "shared component", or ".tsx file" so users phrasing the request differently still match.

Widen or clarify the 'when' clause (e.g. "Use when creating any new component, whether feature or shared") since the current wording restricts triggers to components in an already-existing module.

DimensionReasoningScore

Specificity

"handles templates, props, and test scaffolding" names three concrete objects, but the generic verb "handles" gives no sense of the actual actions (creating component files, writing typed props, generating tests), matching anchor 3's '1-2 concrete actions, not comprehensive'. It falls short of anchor 4 because it does not list several specific actions.

3 / 5

Completeness

Both parts are present: the 'what' ("handles templates, props, and test scaffolding") and an explicit 'when' ("Use when adding a new UI component to an existing module"), matching anchor 4. Not anchor 5 because the 'what' is thin (no concrete action verbs or trigger phrases beyond the single 'when' clause) and the 'when' excludes other plausible cases like creating a module's first component.

4 / 5

Trigger Term Quality

"UI component", "module", and "props" are terms users would plausibly say, but the description omits the most natural trigger words for this React-specific skill ("React", "new component", "tsx", "shared component"), fitting anchor 3's 'relevant keywords but missing common variations or synonyms'.

3 / 5

Distinctiveness Conflict Risk

"adding a new UI component to an existing module" carves out a mostly distinct niche (component creation under project architecture conventions) with minor overlap risk against closely related skills like general code-generation or refactoring helpers, matching anchor 4. Not anchor 5 because "UI component" and "templates" are broadly used terms and the description does not name the React/TSX stack that would fully isolate its triggers.

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