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).
86
81%
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, component design, escape hatches, anti-patterns), and provides explicit trigger conditions including file types. The main weakness is that React is a broad enough domain that this could potentially overlap with more specialized React-related skills, though the file extension triggers help 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 ('Provides React patterns for hooks, effects, refs, and component design. Covers escape hatches, anti-patterns, and correct effect usage') 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/JavaScript skills or broader component library skills. The file extension triggers (.tsx, .jsx) help but React is a broad domain that could conflict with more specialized React skills (e.g., React Router, React state management). | 2 / 3 |
Total | 11 / 12 Passed |
Implementation
70%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a highly actionable and well-structured React patterns guide with excellent BAD/GOOD code contrasts and a useful decision tree. Its main weakness is that it's a monolithic document that would benefit significantly from splitting detailed sections into separate reference files, keeping SKILL.md as a concise overview with links. Some content covers patterns Claude likely already knows (controlled vs uncontrolled, composition over prop drilling).
Suggestions
Split detailed sections (Effect Dependencies, Refs, Custom Hooks, Component Patterns) into separate reference files and link to them from a concise SKILL.md overview
Remove or significantly trim sections covering patterns Claude already knows well (controlled vs uncontrolled, composition over prop drilling) to reduce token usage
Consider trimming some of the more straightforward BAD/GOOD examples where the anti-pattern is obvious, keeping only the most surprising or error-prone ones inline
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is mostly efficient with good BAD/GOOD code comparisons, but it's quite long (~400 lines) and some sections could be tightened. The section headers and brief explanations are well-done, but the sheer volume of examples—while useful—pushes it toward verbose for a single SKILL.md file. Some patterns (like controlled vs uncontrolled) are things Claude already knows well. | 2 / 3 |
Actionability | Every section provides fully executable, copy-paste-ready TSX code examples with clear BAD/GOOD contrasts. The code is concrete, complete, and immediately usable—not pseudocode. The decision tree at the end provides a clear actionable framework. | 3 / 3 |
Workflow Clarity | The decision tree at the end provides an excellent clear sequence for choosing the right pattern. Each section follows a consistent pattern of problem identification → bad approach → good approach. For a skill about React patterns (not destructive/batch operations), this level of workflow clarity is appropriate and sufficient. | 3 / 3 |
Progressive Disclosure | This is a monolithic wall of content (~400 lines) with no references to external files for detailed sections. Topics like Effect dependencies, refs, custom hooks, and component patterns could each be separate reference files linked from a concise overview. The mention of 'typescript-best-practices' at the top is good but the rest is all inline. | 1 / 3 |
Total | 9 / 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
f772de4
- 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.