react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. Use when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements. Do NOT use for component API architecture or composition patterns (use react-composition-patterns instead).
73
66%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./packages/skills-catalog/skills/(quality)/react-best-practices/SKILL.mdQuality
Discovery
89%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 well-structured skill description with strong completeness and distinctiveness, including explicit trigger conditions and a helpful exclusion clause that differentiates it from related skills. The main weakness is that it describes the skill as 'guidelines' without listing specific concrete actions or techniques (like code splitting, lazy loading, memoization), which limits specificity. The trigger terms are natural and comprehensive.
Suggestions
Add specific concrete actions the skill covers, e.g., 'Covers memoization strategies, code splitting, lazy loading, image optimization, and server component usage' to improve specificity.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (React/Next.js performance optimization) and mentions some areas like 'data fetching, bundle optimization, performance improvements,' but doesn't list concrete actions (e.g., 'lazy load components,' 'configure code splitting,' 'optimize image loading'). It describes guidelines rather than specific actionable capabilities. | 2 / 3 |
Completeness | Clearly answers both 'what' (React and Next.js performance optimization guidelines) and 'when' (writing/reviewing/refactoring React/Next.js code, tasks involving components, pages, data fetching, bundle optimization). Also includes an explicit exclusion clause ('Do NOT use for component API architecture'), which strengthens the 'when' guidance. | 3 / 3 |
Trigger Term Quality | Includes strong natural keywords users would say: 'React components,' 'Next.js pages,' 'data fetching,' 'bundle optimization,' 'performance improvements,' 'refactoring,' 'React/Next.js code.' These cover a good range of terms a user would naturally use when seeking performance help. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive with a clear niche (performance optimization specifically) and explicitly differentiates itself from a related skill ('react-composition-patterns') with a 'Do NOT use' clause, significantly reducing conflict risk. | 3 / 3 |
Total | 11 / 12 Passed |
Implementation
42%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill functions well as a table of contents / index for a large rule set, with excellent progressive disclosure and clear categorization by priority. However, it critically lacks actionability — there are no code examples, no concrete patterns, and no executable guidance in the skill body itself. Without the referenced rule files being available, Claude would have almost nothing actionable to work with beyond rule names.
Suggestions
Add at least one concrete, executable code example per critical category (e.g., show a before/after for async-parallel with Promise.all() and for bundle-barrel-imports) so the skill is useful even without the referenced files.
Include a brief workflow section describing how to apply these rules during code review or refactoring (e.g., 'Check critical rules first → identify violations → apply fix → verify bundle size/performance').
For the most impactful rules (CRITICAL priority), inline the key pattern directly rather than only listing the rule name, so Claude can act immediately without file lookups.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is mostly a reference index of 57 rules organized by category, which is useful but somewhat verbose. The rule listings are essentially just names without actionable detail, and the introductory sections ('When to Apply', category table) add moderate overhead without providing executable guidance. However, it avoids explaining basic concepts Claude already knows. | 2 / 3 |
Actionability | The skill provides no concrete code examples, commands, or executable guidance in the body itself. It is entirely a catalog of rule names with brief one-line descriptions, deferring all actual implementation details to external rule files. Claude cannot act on 'async-parallel - Use Promise.all() for independent operations' without the referenced files. | 1 / 3 |
Workflow Clarity | The priority ordering (1-8 by impact) provides a clear sequence for which optimizations to consider first, and the 'How to Use' section explains navigation. However, there are no validation checkpoints, no workflow for applying optimizations, and no feedback loops for verifying that changes actually improved performance. | 2 / 3 |
Progressive Disclosure | The content is well-structured as an overview/index that clearly points to individual rule files (one level deep) and a compiled AGENTS.md. Navigation is straightforward with the category table, rule prefixes, and explicit file path examples for accessing detailed content. | 3 / 3 |
Total | 8 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Repository
- tech-leads-club/agent-skills
- Commit
81e7e0d
- 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.