CtrlK
BlogDocsLog inGet started
Tessl Logo

react-component-generator

生成符合项目规范的 React 组件。当用户要求创建组件、新建 React 组件或生成组件文件时使用

71

Quality

87%

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

96%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 concise, highly actionable skill body with copy-paste-ready templates for component, style, and test files plus a validation-and-fix feedback loop. The only soft spot is progressive disclosure: it is self-contained and well-structured but slightly over the line where inlining all templates is unambiguously ideal.

DimensionReasoningScore

Conciseness

The body is lean — a bullet list of conventions, a short numbered flow, and minimal code templates with terse placeholder comments (// 定义 props 类型, /* 组件内容 */); it assumes Claude's competence and never over-explains React/TypeScript/CSS Modules.

5 / 5

Actionability

It provides fully executable, copy-paste-ready templates for all three generated files (index.tsx, .module.css, .test.tsx) plus concrete validation commands (npm run type-check / lint / test), covering the common cases comprehensively.

5 / 5

Workflow Clarity

The 5-step generation flow is clearly sequenced and followed by an explicit validation stage with a feedback loop ('如有错误,显示错误信息并提供修复建议'), matching the anchor for clear sequence with validation steps and error-recovery feedback.

5 / 5

Progressive Disclosure

Sections (组件规范 / 生成流程 / 质量检查) are well-organized with clear headers and no nested references, and no bundle files exist; at ~85 lines it exceeds the under-50-line simple-skill exception, so the inlined templates could arguably be split out, leaving a minor organization gap.

4 / 5

Total

19

/

20

Passed

Description

78%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 clear, third-person description that explicitly covers both what the skill does and when to trigger it, with good natural trigger coverage. Its main weakness is specificity — it states the headline action but does not list the concrete sub-capabilities (file scaffolding, styling, tests, validation) the body actually delivers.

Suggestions

Enumerate the concrete actions in the description, e.g. '生成符合项目规范的 React 组件,含组件文件、CSS Module 样式和测试文件,并自动运行类型检查与 lint。'

Add informal trigger synonyms users actually say (e.g. '写个组件、做个 React 组件') alongside the formal ones.

DimensionReasoningScore

Specificity

The description names the domain (React 组件) and a concrete action (生成符合项目规范的 React 组件), but does not enumerate multiple specific sub-actions like styling, testing, or props handling, matching the '1-2 concrete actions, not comprehensive' anchor.

3 / 5

Completeness

It explicitly answers both 'what' (生成符合项目规范的 React 组件) and 'when' (当用户要求创建组件、新建 React 组件或生成组件文件时使用) with concrete trigger phrases, matching the top anchor.

5 / 5

Trigger Term Quality

It lists several natural trigger phrases a user would say ('创建组件、新建 React 组件或生成组件文件') including synonyms, but omits informal variations and file extensions, fitting the 'good keyword coverage, a few natural terms missing' anchor.

4 / 5

Distinctiveness Conflict Risk

The React-component niche and its triggers are distinct, but 'React 组件' scaffolding is a crowded space with minor overlap risk against broader React generator skills, fitting the 'mostly distinct, minor overlap risk' anchor rather than a clean 5.

4 / 5

Total

16

/

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
einverne/dotfiles
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.