vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used 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.
74
62%
Does it follow best practices?
Impact
98%
1.02xAverage score across 3 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/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 communicates its domain (React/Next.js performance) and provides explicit trigger conditions. Its main weakness is that it describes the skill at a guideline/category level rather than listing specific concrete optimization actions, and its triggers could overlap with general React/Next.js development skills. The description uses proper third-person voice and includes a good 'Use when' equivalent.
Suggestions
Add specific concrete actions like 'Guides code splitting, lazy loading, image optimization, memoization, server component usage, and caching strategies' to improve specificity.
Sharpen distinctiveness by clarifying this is specifically for performance patterns, not general React/Next.js development — e.g., 'Use only when performance is a concern, not for general React/Next.js feature development.'
| 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 specific concrete actions (e.g., 'lazy load components, optimize images, implement code splitting, configure caching headers'). | 2 / 3 |
Completeness | Clearly answers both 'what' (React and Next.js performance optimization guidelines) and 'when' (writing/reviewing/refactoring React/Next.js code, with explicit triggers on components, pages, data fetching, bundle optimization, or performance improvements). | 3 / 3 |
Trigger Term Quality | Includes strong natural keywords users would say: 'React', 'Next.js', 'performance', 'React components', 'Next.js pages', 'data fetching', 'bundle optimization', 'refactoring'. These cover common variations of how users would phrase performance-related requests. | 3 / 3 |
Distinctiveness Conflict Risk | While it's specific to React/Next.js performance, it could overlap with general React coding skills, Next.js development skills, or generic code review skills. The 'performance optimization' focus helps distinguish it, but 'React components' and 'Next.js pages' are broad triggers that could conflict with non-performance-related React/Next.js skills. | 2 / 3 |
Total | 10 / 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 navigational index with clear categorization and priority ordering, but it lacks actionable content — there are no code examples, no concrete patterns, and no executable guidance within the skill itself. It relies entirely on external rule files for actual implementation details, making it essentially a table of contents rather than a teaching document. The progressive disclosure structure is excellent, but the skill body itself provides almost no value without the referenced files.
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 provides immediate actionable value.
Include a brief workflow section describing how to apply these rules during code review or refactoring: e.g., 'Start with waterfall detection → check bundle imports → verify server patterns → measure with Lighthouse/Web Vitals'.
For the top 3-5 highest-impact rules, inline the key pattern directly (not just the rule name) so Claude can act without needing to read external files.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is mostly a catalog/index of 69 rules, which is useful as a reference, but the extensive listing of every rule name with one-line descriptions is quite long. The 'When to Apply' section is somewhat unnecessary as Claude can infer when to apply React/Next.js performance rules. However, the table format and categorization are efficient. | 2 / 3 |
Actionability | The skill provides no executable code, no concrete examples, and no specific implementation guidance. It is essentially a table of contents listing rule names with brief descriptions, deferring all actual actionable content to external rule files. Claude cannot act on 'async-parallel - Use Promise.all() for independent operations' without seeing the actual patterns. | 1 / 3 |
Workflow Clarity | The priority ordering (1-8 with impact levels) provides a clear sequence for which optimizations to consider first, which is helpful. However, there are no validation steps, no workflow for how to apply these rules during a refactoring session, and no feedback loops for verifying improvements. | 2 / 3 |
Progressive Disclosure | The skill is well-structured as an overview/index that clearly points to individual rule files (e.g., 'rules/async-parallel.md') and a compiled document ('AGENTS.md'). References are one level deep and clearly signaled, with good organization by category and priority. | 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
- vercel-labs/agent-skills
- Commit
73140fc
- 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.