react-component-generator
生成符合项目规范的 React 组件。当用户要求创建组件、新建 React 组件或生成组件文件时使用
Install with Tessl CLI
npx tessl i github:einverne/dotfiles --skill react-component-generator87
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillValidation for skill structure
Discovery
82%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This description has good structure with explicit trigger guidance and natural keywords users would say. However, it lacks specificity about what concrete actions the skill performs beyond generic 'generate components'. The description would benefit from listing specific capabilities like prop handling, styling approaches, or component patterns supported.
Suggestions
Add specific concrete actions like 'Creates functional components with TypeScript, implements hooks, adds prop interfaces, integrates with project styling system'
Clarify what 'project specifications' means - mention specific patterns, file structures, or conventions this skill follows to improve distinctiveness
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (React components) and mentions 'project specifications' but lacks concrete actions like 'create functional components, add props, implement hooks, style with CSS modules'. The phrase '生成符合项目规范的' (generate according to project specs) is somewhat vague about what specific capabilities are offered. | 2 / 3 |
Completeness | Clearly answers both what ('生成符合项目规范的 React 组件' - generate React components following project specs) and when ('当用户要求创建组件、新建 React 组件或生成组件文件时使用' - use when user asks to create/new/generate components). Has explicit 'Use when' equivalent clause. | 3 / 3 |
Trigger Term Quality | Includes good natural trigger terms users would say: '创建组件' (create component), '新建 React 组件' (new React component), '生成组件文件' (generate component file). These cover common variations of how users would request this functionality. | 3 / 3 |
Distinctiveness Conflict Risk | Specific to React components which helps distinguish from general code skills, but could overlap with broader frontend skills, component library skills, or general JavaScript/TypeScript skills. The 'project specifications' aspect is vague and doesn't clarify what makes this distinct. | 2 / 3 |
Total | 10 / 12 Passed |
Implementation
85%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a well-structured skill with good workflow clarity and appropriate conciseness. The main weakness is that templates use placeholders rather than concrete, copy-paste ready examples with actual values. Adding one complete worked example with real component name and props would significantly improve actionability.
Suggestions
Add one complete worked example showing all three files with actual values (e.g., a 'Button' component) instead of just placeholder templates
Replace placeholder comments like '// 定义 props 类型' with concrete prop examples (e.g., 'label: string; onClick?: () => void;')
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Content is lean and efficient, presenting only necessary information without explaining basic React concepts Claude already knows. Every section serves a clear purpose. | 3 / 3 |
Actionability | Provides templates with placeholders rather than fully executable code. The {ComponentName} placeholders require substitution, and the templates contain comments like '// 定义 props 类型' instead of concrete examples. | 2 / 3 |
Workflow Clarity | Clear 5-step sequence with explicit validation checkpoint in the quality check section. Includes feedback loop: 'If errors, display error info and provide fix suggestions.' | 3 / 3 |
Progressive Disclosure | For a skill under 50 lines with no need for external references, the content is well-organized with clear sections (规范, 流程, 质量检查) that are easy to navigate. | 3 / 3 |
Total | 11 / 12 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 — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- 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.