react-dev
tessl i github:softaworks/agent-toolkit --skill react-devThis skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned. Covers type-safe patterns for React 18-19 including generic components, proper event typing, and routing integration (TanStack Router, React Router).
Review Score
91%
Validation Score
11/16
Implementation Score
100%
Activation Score
82%
Generated
Validation
Total
11/16Score
Passed| Criteria | Score |
|---|---|
description_trigger_hint | Description may be missing an explicit 'when to use' trigger hint (e.g., 'Use when...') |
metadata_version | 'metadata' field is not a dictionary |
license_field | 'license' field is missing |
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata |
body_steps | No step-by-step structure detected (no ordered list); consider adding a simple workflow |
Implementation
Score
100%Overall Assessment
This is an exemplary skill file that demonstrates excellent token efficiency while providing comprehensive, actionable guidance for React TypeScript development. The content is well-organized with clear sections, executable code examples, and appropriate progressive disclosure through linked reference files. The ALWAYS/NEVER rules section provides clear guardrails for correct usage.
| Dimension | Score | Reasoning |
|---|---|---|
Conciseness | 3/3 | The content is lean and efficient, assuming Claude's competence with TypeScript and React. Every section provides direct, actionable patterns without explaining basic concepts like what React or TypeScript are. |
Actionability | 3/3 | All code examples are fully executable and copy-paste ready. The skill provides specific, concrete patterns for every use case including component props, event handlers, hooks, generics, and routing with real TypeScript syntax. |
Workflow Clarity | 3/3 | For a reference/pattern skill, the workflow is clear through well-organized sections. The when_to_use section establishes scope, and the rules section provides explicit ALWAYS/NEVER guidance that serves as validation checkpoints for correct implementation. |
Progressive Disclosure | 3/3 | Excellent structure with a clear overview in the main file and well-signaled one-level-deep references to detailed materials (hooks.md, event-handlers.md, react-19-patterns.md, etc.). Content is appropriately split between quick patterns and detailed reference files. |
Activation
Suggestions 2
Score
82%Overall Assessment
This is a reasonably well-crafted description that clearly identifies when to use the skill and covers relevant trigger terms for React TypeScript development. The main weakness is moderate specificity - it could benefit from more concrete action verbs describing what the skill actually does (e.g., 'defines prop types', 'configures generic components'). The description also risks some overlap with adjacent skills.
Suggestions
- Replace vague phrases like 'type-safe patterns' and 'routing integration' with specific concrete actions (e.g., 'define typed props and state', 'configure TanStack Router type inference')
- Add file extensions or patterns that would trigger selection (e.g., '.tsx files', 'React.FC', 'useState<T>')
| Dimension | Score | Reasoning |
|---|---|---|
Specificity | 2/3 | Names the domain (React/TypeScript) and mentions some actions like 'building React components', 'typing hooks', 'handling events', but doesn't list comprehensive concrete actions. Terms like 'type-safe patterns' and 'routing integration' are somewhat vague. |
Completeness | 3/3 | Explicitly answers both what ('building React components with TypeScript, typing hooks, handling events, generic components, proper event typing, routing integration') and when ('should be used when building React components with TypeScript... or when React TypeScript, React 19, Server Components are mentioned'). |
Trigger Term Quality | 3/3 | Good coverage of natural terms users would say: 'React components', 'TypeScript', 'hooks', 'events', 'React 19', 'Server Components', 'TanStack Router', 'React Router', 'React 18'. These are terms developers naturally use when seeking help. |
Distinctiveness Conflict Risk | 2/3 | While specific to React+TypeScript, it could overlap with general TypeScript skills or general React skills. The mention of specific versions (18-19) and Server Components helps, but 'routing integration' could conflict with router-specific skills. |