tessl-labs/react-patterns
React patterns — always apply error boundaries, loading states, accessible markup, proper hooks, controlled forms, stable keys, and correct memoization
87
80%
Does it follow best practices?
Impact
99%
1.83xAverage score across 5 eval scenarios
Passed
No known issues
Quality
Discovery
67%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 excels at listing specific React patterns and is clearly distinguishable from other skills. However, it lacks explicit trigger guidance ('Use when...') and could benefit from more natural user-facing keywords. The instruction to 'apply proactively without being asked' is unusual for skill selection purposes.
Suggestions
Add an explicit 'Use when...' clause, e.g., 'Use when writing React components, working with JSX, or implementing React hooks.'
Include more natural trigger terms users might say: 'React app', 'component', 'useState', 'useEffect', 'JSX', 'frontend', '.jsx/.tsx files'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: error boundaries, loading/error/empty states, accessible markup, proper hooks, controlled forms, stable keys, and correct memoization. These are concrete, actionable patterns. | 3 / 3 |
Completeness | Clearly answers 'what' (React patterns to apply) but the 'when' is weak - 'Apply these proactively without being asked' and 'in every React component' is implicit rather than explicit trigger guidance. Missing a proper 'Use when...' clause. | 2 / 3 |
Trigger Term Quality | Includes 'React' and 'React component' which are natural terms, but lacks variations users might say like 'hooks', 'useState', 'useEffect', 'JSX', or common problem phrases like 'component not rendering' or 'state management'. | 2 / 3 |
Distinctiveness Conflict Risk | Clearly scoped to React-specific patterns with distinct technical concepts (error boundaries, hooks, memoization). Unlikely to conflict with general coding skills or other framework-specific skills. | 3 / 3 |
Total | 10 / 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 strong, production-quality skill that provides highly actionable React patterns with excellent code examples and clear organization. The main weakness is some verbosity in explanations that Claude doesn't need (e.g., explaining why certain patterns exist rather than just showing them). The checklist and WRONG/RIGHT comparisons are particularly effective for ensuring correct application.
Suggestions
Remove explanatory sentences like 'Error boundaries must be class components' and 'These are mandatory on every component' — Claude knows this; just show the pattern
Condense section introductions (e.g., 'Never render only the happy path' can be cut; the code example makes this clear)
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is comprehensive but includes some explanatory text that Claude already knows (e.g., explaining why error boundaries must be class components, explaining what controlled inputs are). The content could be tightened by removing explanations and keeping only the patterns and code. | 2 / 3 |
Actionability | Excellent actionability with fully executable TypeScript/React code examples throughout. Every pattern includes copy-paste ready code with correct syntax, proper typing, and complete implementations. The WRONG/RIGHT comparisons make correct usage crystal clear. | 3 / 3 |
Workflow Clarity | For a patterns/checklist skill, the workflow is exceptionally clear. The numbered sections provide logical sequencing, the checklist at the end serves as a validation checkpoint, and each pattern clearly states when to apply it. The skill explicitly states these are mandatory patterns to apply proactively. | 3 / 3 |
Progressive Disclosure | Well-organized with clear sections, a comprehensive checklist summary, and appropriate external references to React docs and WAI-ARIA. The verifiers section provides clear links to test scenarios. Content is appropriately structured for a single SKILL.md file without needing additional files. | 3 / 3 |
Total | 11 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 10 / 11 Passed | |
Reviewed
Table of Contents