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.
68
62%
Does it follow best practices?
Impact
66%
1.15xAverage score across 3 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/vercel-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 purpose and includes explicit trigger guidance. Its main weakness is that the capabilities are described at a high level rather than listing specific concrete optimization techniques, and the trigger terms are broad enough that they could conflict with general React/Next.js development skills. Adding specific actions would strengthen both specificity and distinctiveness.
Suggestions
List specific concrete optimization actions (e.g., 'Guides code splitting, lazy loading, image optimization, memoization, server component usage, and caching strategies') to improve specificity.
Narrow trigger terms to reduce conflict risk with general React/Next.js skills—e.g., specify 'Use when the user mentions performance, slow loading, bundle size, rendering speed, or optimization' rather than broad terms like 'React components' or 'Next.js pages'.
| 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 broader web performance optimization skills. The 'React components' and 'Next.js pages' triggers are quite broad and could fire for non-performance-related React/Next.js tasks. | 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 as a well-organized index/table of contents for React/Next.js performance rules, with good progressive disclosure and clear categorization by priority. However, it critically lacks actionability—there are no code examples, no concrete patterns, and no executable guidance within the skill itself. Without at least a few representative examples of the most critical patterns, Claude would need to read external files before being able to apply any of these rules.
Suggestions
Add 2-3 inline code examples for the CRITICAL priority rules (e.g., show a before/after for async-parallel with Promise.all() and bundle-barrel-imports with direct imports) so Claude can act immediately on the highest-impact patterns.
Include a brief workflow section describing how to apply these rules during code review: e.g., 1) Check for waterfalls, 2) Audit imports for barrel files, 3) Verify server/client boundary, with specific commands or checks for each step.
Remove the 'When to Apply' section—Claude can infer when React/Next.js performance guidelines are relevant from context.
Consider inlining the content of the top 3-5 most impactful rules directly in the skill to reduce dependency on external file reads for common cases.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is mostly efficient as a reference index, but the 'When to Apply' section and the introductory paragraph explain things Claude can infer. The table of 45 rules with prefixes is useful but the brief descriptions are somewhat redundant given that rule files exist separately. | 2 / 3 |
Actionability | The skill provides no executable code, no concrete examples, and no specific patterns to follow. It is essentially a table of contents pointing to other files. Claude cannot act on 'async-parallel - Use Promise.all() for independent operations' without seeing the actual rule content. | 1 / 3 |
Workflow Clarity | The priority ordering provides a clear sequence for which optimizations to consider first, but there is no workflow for how to actually apply these rules during code review or refactoring. No validation steps or feedback loops are described for verifying performance improvements. | 2 / 3 |
Progressive Disclosure | The skill is well-structured as an overview with clear references to individual rule files (rules/async-parallel.md, etc.) and a compiled document (AGENTS.md). Navigation is one level deep and clearly signaled with the file path conventions. | 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
- tibelf/ai_project_init
- Commit
56f4516
- 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.