react-best-practices
Provides React patterns for hooks, effects, refs, and component design. Covers escape hatches, anti-patterns, and correct effect usage. Must use when reading or writing React components (.tsx, .jsx files with React imports).
88
84%
Does it follow best practices?
Impact
96%
1.07xAverage score across 3 eval scenarios
Passed
No known issues
Quality
Discovery
92%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 a strong skill description that clearly identifies its domain (React development), lists specific capabilities (hooks, effects, refs, escape hatches, anti-patterns), and provides explicit trigger conditions with file type indicators. The main weakness is potential overlap with other frontend or JavaScript-related skills, though the React-specific terminology helps mitigate this.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete areas: hooks, effects, refs, component design, escape hatches, anti-patterns, and correct effect usage. These are concrete, recognizable React concepts. | 3 / 3 |
Completeness | Clearly answers both 'what' (React patterns for hooks, effects, refs, component design, escape hatches, anti-patterns) and 'when' ('Must use when reading or writing React components (.tsx, .jsx files with React imports)'). | 3 / 3 |
Trigger Term Quality | Includes strong natural keywords users would use: 'React', 'hooks', 'effects', 'refs', 'component', '.tsx', '.jsx', 'React imports'. These cover common terms developers naturally use when working with React. | 3 / 3 |
Distinctiveness Conflict Risk | While it targets React specifically, it could overlap with general frontend/TypeScript/JavaScript skills or broader component library skills. The file extension triggers (.tsx, .jsx) help but 'component design' is somewhat broad. | 2 / 3 |
Total | 11 / 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 strong React patterns skill with excellent actionability through concrete BAD/GOOD code pairs and a useful decision tree. The content is well-organized with clear sections, but the document is quite long for a SKILL.md and would benefit from splitting detailed subsections into separate files. Conciseness could be improved by trimming some explanatory text that the code examples already demonstrate.
Suggestions
Split detailed sections (Effect Dependencies, Refs, Custom Hooks, Component Patterns) into separate reference files and link to them from the main SKILL.md overview to improve progressive disclosure.
Trim explanatory sentences before code blocks where the BAD/GOOD labels and code comments already convey the message (e.g., 'Effects let you step outside React to synchronize with external systems' is knowledge Claude already has).
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is mostly efficient with good BAD/GOOD code comparisons, but it's quite long (~350 lines) and some sections could be tightened. The explanatory text before code blocks sometimes states what the code already shows. However, it avoids explaining basic React concepts Claude would know. | 2 / 3 |
Actionability | Every pattern is illustrated with fully executable, copy-paste-ready TSX code examples. The BAD/GOOD pattern pairs make it immediately clear what to do and what to avoid. The decision tree at the end provides concrete guidance for choosing the right approach. | 3 / 3 |
Workflow Clarity | This is primarily a patterns/reference skill rather than a multi-step workflow skill. The decision tree at the end provides a clear sequenced decision process. Each section has a clear single purpose with unambiguous guidance. No destructive or batch operations require validation checkpoints. | 3 / 3 |
Progressive Disclosure | The content is well-structured with clear section headers, but it's a monolithic document that could benefit from splitting detailed sections (e.g., Effect Dependencies, Refs, Custom Hooks) into separate reference files. The cross-reference to typescript-best-practices is good, but the main file is very long for a SKILL.md overview. | 2 / 3 |
Total | 10 / 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 |
|---|---|---|
skill_md_line_count | SKILL.md is long (571 lines); consider splitting into references/ and linking | Warning |
Total | 10 / 11 Passed | |
- Repository
- NeverSight/skills_feed
- Commit
e437c3c
- 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.