react-expert
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.
94
92%
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 (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. The description is concise yet comprehensive, making it highly effective for skill selection among many options.
| 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
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 React skill with strong actionability through executable code examples, clear workflow with validation feedback loops, and excellent progressive disclosure via a reference table. The main weakness is moderate verbosity—some sections like 'When to Use This Skill', 'Knowledge Reference', and certain constraint items explain things Claude already knows, consuming tokens without adding value.
Suggestions
Remove the 'When to Use This Skill' section—this duplicates the YAML frontmatter description and Claude can infer applicability from context.
Remove the 'Knowledge Reference' keyword list at the bottom—it adds no actionable guidance and wastes tokens.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Generally efficient but includes some unnecessary sections like 'When to Use This Skill' (Claude can infer this), 'Knowledge Reference' (just a keyword list adding no value), and the role description opener. The code examples are well-chosen but the constraints section has some items Claude already knows (e.g., 'mutate state directly', 'use array index as key'). | 2 / 3 |
Actionability | Provides fully executable, copy-paste-ready TypeScript code examples for three key patterns (Server Components, useActionState forms, custom hooks). The workflow includes specific commands like `tsc --noEmit` and concrete guidance on what to do at each step. | 3 / 3 |
Workflow Clarity | The core workflow has a clear 6-step sequence with explicit validation checkpoints (step 4: run tsc, fix, re-run until clean), feedback loops (step 5 returns to step 4 if new errors appear), and a final testing gate (step 6: debug and fix before submitting). This is well-structured for a development workflow. | 3 / 3 |
Progressive Disclosure | Excellent use of a reference table with 7 topic-specific files, each with clear 'Load When' conditions. The main skill provides a concise overview with key patterns inline while deferring detailed guidance to one-level-deep reference files. Navigation is clear and well-signaled. | 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.
- Repository
- jeffallan/claude-skills
- Commit
3d95bb1
- 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.