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.
72
58%
Does it follow best practices?
Impact
96%
1.15xAverage 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 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
Add specific concrete actions like 'Implements code splitting, optimizes images with next/image, configures caching strategies, reduces bundle size, applies React.memo and useMemo patterns'
Narrow trigger terms to reduce conflict risk with general React/Next.js skills—e.g., specify 'Use when the user mentions slow rendering, large bundle size, Core Web Vitals, or asks to optimize React/Next.js code' rather than broadly triggering on any React component work
| 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, 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 terms a developer would use when seeking performance help. | 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
35%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/catalog of 70 React/Next.js performance rules but lacks actionable content — there are zero code examples, no before/after patterns, and no executable guidance in the skill body itself. The priority-based organization and category system are valuable, but without the referenced rule files in the bundle, the skill provides little that Claude can directly act on. It reads more like a table of contents than a skill.
Suggestions
Add concrete before/after code examples for at least the top 3-5 CRITICAL rules (e.g., async-parallel, bundle-barrel-imports) directly in the SKILL.md so Claude has actionable patterns without needing external files.
Include a brief workflow section describing how to audit existing code against these rules — e.g., 'Start by checking for sequential awaits (async-*), then analyze imports for barrel files (bundle-*), then review component boundaries.'
Either include the referenced bundle files (rules/*.md, AGENTS.md) or inline the most impactful rule details so the skill is self-contained enough to be useful.
Remove the 'When to Apply' section — these triggers are obvious and waste tokens. Replace with a compact 'Common anti-patterns' section showing 2-3 concrete code smells and their fixes.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is mostly a catalog/index of 70 rules organized by category. While the table and lists are reasonably structured, the content is largely a listing of rule names with one-line descriptions that Claude could likely infer from the rule names themselves. The 'When to Apply' section states obvious triggers. However, the priority ordering and prefix system add genuine value. | 2 / 3 |
Actionability | The skill provides no executable code, no concrete examples, and no specific implementation guidance. It is entirely a directory/index pointing to rule files that are not included. Each rule is just a name and a brief description — Claude cannot act on 'Use Promise.all() for independent operations' without the actual rule content showing before/after code patterns. | 1 / 3 |
Workflow Clarity | The priority table provides a clear sequence for which optimizations to tackle first (CRITICAL → LOW), which is useful workflow guidance. However, there are no validation steps, no process for applying rules, no feedback loops for verifying that optimizations actually improved performance, and no guidance on how to systematically audit code against these rules. | 2 / 3 |
Progressive Disclosure | The skill references individual rule files (e.g., 'rules/async-parallel.md') and a compiled 'AGENTS.md', which is good progressive disclosure structure. However, no bundle files are provided, so we cannot verify these references exist. The SKILL.md itself is essentially all index with no substantive content at the top level — it would benefit from at least a few inline examples of the highest-priority patterns before deferring to external files. | 2 / 3 |
Total | 7 / 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.
b9c8ee0
Table of Contents
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.