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).
85
79%
Does it follow best practices?
Impact
96%
1.07xAverage score across 3 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./data/skills-md/0xbigboss/claude-code/react-best-practices/SKILL.mdQuality
Discovery
82%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 solid description that clearly identifies its React-specific domain and provides explicit trigger conditions with file type indicators. Its main weakness is that the capability verbs ('provides', 'covers') are somewhat passive rather than describing concrete actions Claude would perform. The trigger terms are well-chosen and the 'Must use when' clause provides clear activation guidance.
Suggestions
Replace passive verbs like 'Provides' and 'Covers' with concrete actions such as 'Applies correct React hook patterns, diagnoses effect dependency issues, refactors anti-patterns in component design'
Add more distinctive trigger terms to reduce overlap with general frontend skills, e.g., 'useState, useEffect, useRef, custom hooks, React lifecycle'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (React) and several specific areas (hooks, effects, refs, component design, escape hatches, anti-patterns), but the actions are described as 'provides patterns' and 'covers' rather than listing multiple concrete actions like 'refactor hooks', 'fix effect dependencies', etc. | 2 / 3 |
Completeness | Clearly answers both what ('React patterns for hooks, effects, refs, and component design; escape hatches, anti-patterns, 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 say: 'React', 'hooks', 'effects', 'refs', 'component', '.tsx', '.jsx', 'React imports'. These cover common terms developers use when working with React code. | 3 / 3 |
Distinctiveness Conflict Risk | While React-specific, it could overlap with general TypeScript/JavaScript skills or broader frontend development skills. The mention of .tsx/.jsx files helps, but 'component design' and 'patterns' are broad enough to potentially conflict with other frontend or architecture skills. | 2 / 3 |
Total | 10 / 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, highly actionable React skill with excellent concrete code examples covering effects, refs, hooks, and component patterns. Its main weakness is length — at ~350 lines it could benefit from splitting detailed sections into referenced files, and some introductory explanations could be trimmed since Claude already understands React fundamentals. The decision tree summary is an excellent touch that ties everything together.
Suggestions
Split detailed sections (Effect Dependencies, Refs, Custom Hooks, Component Patterns) into separate referenced files and keep SKILL.md as a concise overview with the decision tree and most critical anti-patterns only.
Trim explanatory prose like 'Effects let you step outside React to synchronize with external systems' — Claude knows what effects are; focus on the actionable rules and patterns.
| 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 explain concepts Claude would already know (e.g., 'Effects let you step outside React to synchronize with external systems'). Some anti-pattern examples could be consolidated rather than exhaustively enumerated. | 2 / 3 |
Actionability | Every pattern is demonstrated with fully executable, copy-paste-ready TSX code examples showing both the anti-pattern (BAD) and the correct approach (GOOD). The examples are concrete, realistic, and immediately usable. | 3 / 3 |
Workflow Clarity | The decision tree at the end provides a clear, sequenced workflow for choosing the right pattern. For a skill focused on patterns and best practices rather than multi-step destructive operations, the structure is excellent — each section flows logically and the BAD/GOOD format makes the correct path unambiguous. | 3 / 3 |
Progressive Disclosure | The content is a single monolithic file with no references to supporting documents despite being ~350 lines. Sections like Effect Dependencies, Refs, Custom Hooks, and Component Patterns could each be separate reference files linked from a concise overview. The cross-reference to 'typescript-best-practices' is good but the rest is all inline. | 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
aa009ea
- 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.