CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

new-component

Scaffold a new React component following this project's conventions (kel-ui-components first, data-driven content, co-located tests, accessibility by default). Use when asked to create a new component or homepage section.

Quality

92%

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

92%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 content is an exemplary project-conventions skill: terse, purely project-specific, sequenced into steps with concrete verification commands, and appropriately sized so no progressive disclosure is needed. The single weak point is the incompletely specified error-boundary tier selection for lazy homepage sections.

DimensionReasoningScore

Conciseness

The body is lean and assumes Claude's competence — every line carries project-specific information Claude could not know (exact paths, "that dir is mostly legacy", "globals: true", forced dark mode) with zero explanation of concepts Claude already knows, matching anchor 5.

5 / 5

Actionability

Guidance is mostly executable — exact file paths, an import example, and copy-paste verify commands ("bun run lint", "bunx vitest run src/components/__tests__/<Name>.test.tsx") — but the error-boundary tier instruction ("Pick the error-boundary tier (`ComponentErrorBoundary` for granular) that matches blast radius") names only one tier, leaving a minor gap for the homepage-section case, so anchor 4 rather than 5.

4 / 5

Workflow Clarity

Six clearly sequenced steps ending in an explicit verification step with exact commands; this is not a destructive or batch operation so no validation cap applies, and as a simple single-purpose skill under 50 lines its unambiguous sequence matches anchor 5.

5 / 5

Progressive Disclosure

There are no bundle files (references/, scripts/, assets/ are absent), and this under-50-line skill needs none; the two well-organized sections ("Conventions to follow", "Steps") satisfy the simple-skill condition for a top progressive-disclosure score.

5 / 5

Total

19

/

20

Passed

Description

87%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 strong description: third-person, concrete, and explicit about both capability and trigger conditions, with project-specific detail (kel-ui-components, co-located tests, accessibility) that makes it clearly distinguishable. The only room for improvement is broader synonym coverage and slightly richer enumeration of the distinct sub-actions.

DimensionReasoningScore

Specificity

The description names a concrete action ("Scaffold a new React component") and enumerates several specific convention areas ("kel-ui-components first, data-driven content, co-located tests, accessibility by default"), but these are qualifiers on a single scaffold action rather than a comprehensive list of multiple distinct actions, matching anchor 4 rather than 5.

4 / 5

Completeness

It explicitly answers both what ("Scaffold a new React component following this project's conventions") and when ("Use when asked to create a new component or homepage section") with concrete trigger phrases, matching anchor 5; the 'when' clause is explicit, not weakly implied as at anchor 4.

5 / 5

Trigger Term Quality

It includes natural phrases a user would actually say — "create a new component", "new React component", "homepage section" — which is good keyword coverage; a few natural synonyms (e.g. "add/build a component", "section") are missing, so it sits at anchor 4 rather than 5.

4 / 5

Distinctiveness Conflict Risk

"create a new component or homepage section" defines a clear niche with distinct triggers that would not fire for editing, refactoring, or general test-writing requests, giving minimal conflict risk as at anchor 5.

5 / 5

Total

18

/

20

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 — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

RaquelSousa/kel-portfolio-2.0

Path

.claude/skills/new-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.