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.
72
88%
Does it follow best practices?
Impact
—
No eval scenarios have been run
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 (React 18+ development), lists concrete actions, and provides explicit trigger conditions with both 'Use when' and 'Invoke for' clauses. It includes rich, natural trigger terms spanning file types, frameworks, specific React features, and common developer tasks, making it highly distinguishable from other skills.
| 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, and performance optimization. | 3 / 3 |
Completeness | Clearly answers both 'what' (creates components, implements hooks, debugs rendering, migrates components, state management) and 'when' with explicit triggers ('Use when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setups' and 'Invoke for Server Components, Suspense boundaries...'). | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say: 'React', '.jsx', '.tsx', 'Next.js App Router', 'create-react-app', 'custom hooks', 'rendering issues', 'class components', 'state management', 'Server Components', 'Suspense', 'useActionState', 'React 19'. These are terms developers naturally use when seeking React help. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive with clear niche targeting React 18+/19 specifically, including framework-specific terms like 'Next.js App Router', 'useActionState', 'Server Components', and file extensions '.jsx'/'.tsx'. Unlikely to conflict with general JavaScript or other framework skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
77%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a solid React skill with excellent actionability through executable TypeScript examples and a well-structured workflow with validation feedback loops. The progressive disclosure structure is well-designed in theory but undermined by the absence of actual bundle files. Minor conciseness issues include redundant sections (role declaration, keyword list, 'When to Use' repeating the description) that could be trimmed.
Suggestions
Remove the 'Knowledge Reference' keyword list and the role declaration sentence — these add no actionable value and waste tokens.
Create the referenced bundle files (e.g., references/server-components.md, references/react-19-features.md) to fulfill the progressive disclosure promises made in the reference table.
Trim or remove the 'When to Use This Skill' section since it largely duplicates the skill description in the frontmatter.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Generally efficient but includes some unnecessary sections like 'Knowledge Reference' which is just a keyword list Claude already knows, and the 'When to Use This Skill' section largely restates the frontmatter description. The role declaration ('Senior React specialist...') adds no value. However, the code examples and constraints are tight. | 2 / 3 |
Actionability | Provides fully executable, copy-paste-ready TypeScript code examples for three key patterns (Server Components, useActionState forms, custom hooks). The constraints section gives specific, concrete do/don't guidance. The workflow includes specific commands like `tsc --noEmit`. | 3 / 3 |
Workflow Clarity | The core workflow has a clear 6-step sequence with explicit validation checkpoints: step 4 requires running `tsc --noEmit` and re-running until clean, step 5 loops back to step 4 if new type errors appear, and step 6 requires debugging failed assertions before submitting. This constitutes proper feedback loops for error recovery. | 3 / 3 |
Progressive Disclosure | The reference table is well-structured with clear 'Load When' guidance, pointing to 7 separate reference files. However, no bundle files were provided, meaning none of these references actually exist. The inline content is reasonably sized but the constraints and output templates sections could potentially be in reference files to keep the main skill leaner. | 2 / 3 |
Total | 10 / 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.
e8be415
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.