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 both what the skill does and when to use it, with good trigger term coverage for the React/Next.js performance domain. Its main weaknesses are the lack of specific concrete actions (it describes the domain rather than listing particular optimization techniques) and moderate overlap risk with other React/Next.js skills that aren't performance-focused.
Suggestions
Add specific concrete actions like 'implements code splitting, optimizes images with next/image, configures caching strategies, reduces bundle size, applies memoization patterns' to improve specificity.
Sharpen distinctiveness by adding a negative boundary such as 'Not for general React component creation or Next.js routing setup—use only when performance optimization is the goal.'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | The description 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 ('when writing, reviewing, or refactoring React/Next.js code') with explicit triggers ('tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements'). | 3 / 3 |
Trigger Term Quality | Good coverage of natural terms users would say: 'React', 'Next.js', 'React components', 'Next.js pages', 'data fetching', 'bundle optimization', 'performance improvements', 'refactoring'. These are terms developers naturally use when seeking performance help. | 3 / 3 |
Distinctiveness Conflict Risk | While it's specific to React/Next.js performance, it could overlap with a general React coding skill, a Next.js configuration skill, or a generic performance optimization skill. The 'React components' and 'Next.js pages' triggers are broad enough to potentially conflict with non-performance-focused React/Next.js skills. | 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, with clear prioritization and categorization. However, it lacks any concrete, actionable content—no code examples, no executable guidance, and no implementation details are provided inline. All substance is deferred to external rule files that are not included in the bundle, making the skill essentially a table of contents without the book.
Suggestions
Add at least 2-3 inline code examples for the highest-priority rules (e.g., async-parallel with Promise.all, bundle-barrel-imports with correct import syntax) to make the skill actionable without requiring external files.
Include a brief workflow section describing how to apply these rules during code review or refactoring, with validation steps (e.g., 'Run bundle analyzer after applying bundle-* rules to verify size reduction').
Consider moving the full 70-rule listing to a separate REFERENCE.md and keeping only the top 10-15 highest-impact rules with concrete examples in SKILL.md to improve conciseness.
Provide the referenced bundle files (rules/*.md, AGENTS.md) or note their absence—without them, the progressive disclosure structure is broken.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is mostly a catalog/index of 70 rules, which is useful as a reference, but the extensive listing of every rule name with one-line descriptions is quite long and could be more token-efficient. The 'When to Apply' section and category table are reasonable, but the full enumeration of all 70 rules adds significant length without providing actionable detail—it's essentially a table of contents that Claude could navigate from file references alone. | 2 / 3 |
Actionability | The skill provides no executable code, no concrete examples, and no specific implementation guidance. It is entirely a catalog of rule names with brief descriptions, deferring all actual content to external rule files. Claude cannot act on 'async-parallel - Use Promise.all() for independent operations' without the referenced files, and no bundle files are provided. | 1 / 3 |
Workflow Clarity | The priority ordering provides a clear sequence for which optimizations to consider first, and the 'When to Apply' section gives reasonable triggers. However, there are no validation steps, no feedback loops, and no process for verifying that optimizations were correctly applied. For a skill involving code refactoring, some verification guidance would be expected. | 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 the references are unverifiable and the skill is essentially non-functional as a standalone document. The inline content is also quite long for what is essentially an index—the full rule listing could itself be in a separate reference file. | 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.
4ec6f84
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.