Use when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setups. Creates components, implements custom hooks, debugs rendering issues, migrates class components to functional, and implements state management. Invoke for Server Components, Suspense boundaries, useActionState forms, performance optimization, or React 19 features.
97
100%
Does it follow best practices?
Impact
94%
1.03xAverage score across 6 eval scenarios
Passed
No known issues
Quality
Discovery
100%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 is an excellent skill description that clearly defines its scope for React development. It provides specific actions, comprehensive trigger terms covering file extensions, frameworks, and React-specific features, and explicitly states both when to use it and what it does. The description uses proper third-person voice throughout.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'Creates components, implements custom hooks, debugs rendering issues, migrates class components to functional, and implements state management.' Also mentions specific technical features like Server Components, Suspense boundaries, useActionState forms. | 3 / 3 |
Completeness | Clearly answers both what ('Creates components, implements custom hooks, debugs rendering issues...') and when ('Use when building React 18+ applications...', 'Invoke for Server Components, Suspense boundaries...'). Has explicit 'Use when' and 'Invoke for' clauses. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say: 'React 18+', '.jsx', '.tsx', 'Next.js App Router', 'create-react-app', 'custom hooks', 'Server Components', 'Suspense', 'React 19'. These are terms developers naturally use when discussing React work. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive with React-specific triggers like '.jsx', '.tsx', 'Next.js App Router', 'Server Components', 'useActionState', 'React 19 features'. Unlikely to conflict with general JavaScript or other framework skills due to specific React terminology. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
100%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a high-quality skill that exemplifies best practices: concise yet comprehensive, with executable code examples, clear validation workflows, and well-organized progressive disclosure through a reference table. The constraints section provides actionable do/don't guidance without over-explaining concepts Claude already understands.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is lean and efficient, avoiding explanations of basic React concepts Claude already knows. Every section serves a purpose with no padding or unnecessary context. | 3 / 3 |
Actionability | Provides fully executable TypeScript code examples for Server Components, useActionState forms, and custom hooks. All examples are copy-paste ready with proper types and imports. | 3 / 3 |
Workflow Clarity | The 6-step core workflow includes explicit validation checkpoints ('Run tsc --noEmit; if it fails... re-run until clean before proceeding') with clear feedback loops for error recovery. | 3 / 3 |
Progressive Disclosure | Excellent structure with a concise overview, reference table pointing to one-level-deep topic files, and clear navigation signals. Content is appropriately split between quick patterns and detailed references. | 3 / 3 |
Total | 12 / 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.
5b76101
Table of Contents
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.