Use when building React 18+ applications requiring component architecture, hooks patterns, or state management. Invoke for Server Components, performance optimization, Suspense boundaries, React 19 features.
Install with Tessl CLI
npx tessl i github:jeffallan/claude-skills --skill react-expertOverall
score
68%
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
72%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
The description has strong trigger terms and clear React-specific scope, making it distinctive and easy to match. However, it lacks concrete action verbs describing what the skill actually does (e.g., 'build components', 'debug rendering issues', 'optimize performance'). The description focuses on when to invoke rather than what capabilities it provides.
Suggestions
Add specific action verbs at the beginning describing concrete capabilities (e.g., 'Build React components, implement hooks patterns, debug rendering issues, optimize performance')
Restructure to lead with 'what it does' before 'when to use it' - currently the description is inverted from the ideal pattern shown in good examples
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (React 18+ applications) and mentions several concepts (component architecture, hooks patterns, state management, Server Components, Suspense boundaries), but these are more categories than concrete actions. Missing specific verbs like 'create', 'debug', 'refactor', or 'implement'. | 2 / 3 |
Completeness | Has 'Use when' and 'Invoke for' clauses which address when to use it, but the 'what does this do' portion is weak - it describes contexts rather than concrete capabilities. The description tells when to trigger but not what actions the skill performs. | 2 / 3 |
Trigger Term Quality | Good coverage of natural terms users would say: 'React', 'hooks', 'state management', 'Server Components', 'Suspense', 'React 19'. These are terms developers naturally use when seeking React help. | 3 / 3 |
Distinctiveness Conflict Risk | Clearly scoped to React 18+ with specific version callouts (React 19) and React-specific terminology (Server Components, Suspense boundaries, hooks). Unlikely to conflict with general JavaScript or other framework skills. | 3 / 3 |
Total | 10 / 12 Passed |
Implementation
57%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill demonstrates strong progressive disclosure with a well-organized reference table, but lacks the concrete code examples that would make it immediately actionable. The constraints section provides valuable guardrails, though the role definition adds unnecessary verbosity. Adding executable code snippets for key patterns would significantly improve utility.
Suggestions
Add 2-3 executable code examples for common patterns (e.g., Server Component with use() hook, form action with useActionState)
Remove or condense the 'Role Definition' section - Claude doesn't need persona framing to apply the skill
Add validation checkpoints to the Core Workflow, such as 'Verify no hydration mismatches' or 'Check accessibility with axe-core'
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill includes some unnecessary framing ('Senior React specialist with 10+ years of frontend experience') and the 'Role Definition' section explains what Claude should already understand. The reference table and constraints are efficient, but the overall structure could be tighter. | 2 / 3 |
Actionability | The skill provides good categorical guidance (MUST DO/MUST NOT DO lists, reference table) but lacks concrete, executable code examples. No copy-paste ready snippets for common patterns like Server Components, use() hook, or form actions are provided. | 2 / 3 |
Workflow Clarity | The 5-step 'Core Workflow' provides a reasonable sequence but lacks validation checkpoints or feedback loops. For a skill covering complex operations like state management and Server Components, explicit verification steps would strengthen the workflow. | 2 / 3 |
Progressive Disclosure | Excellent use of a reference table with clear 'Load When' conditions. References are one level deep, well-organized by topic, and the main skill serves as a concise overview pointing to detailed materials. | 3 / 3 |
Total | 9 / 12 Passed |
Validation
75%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 12 / 16 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
metadata_version | 'metadata' field is not a dictionary | Warning |
license_field | 'license' field is missing | Warning |
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
body_examples | No examples detected (no code fences and no 'Example' wording) | Warning |
Total | 12 / 16 Passed | |
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.