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.
69
62%
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 ./plugins/react-best-practices/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 a lack of specific concrete actions—it describes the category of work rather than listing the specific optimization techniques it covers. The broad triggers like 'React components' and 'Next.js pages' could cause it to activate for non-performance-related tasks.
Suggestions
Add specific concrete actions like 'implements code splitting, optimizes images with next/image, configures caching strategies, reduces bundle size, lazy loads components'
Narrow the trigger terms to be more performance-specific—'React components' alone is too broad; consider 'slow React components, render optimization, re-render issues, Core Web Vitals'
| 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
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 table of contents for a React/Next.js performance optimization ruleset, 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. The content would benefit greatly from including at least one concrete code example per category to make it immediately useful without requiring file lookups.
Suggestions
Add at least one concrete, executable code example for each of the top 3 priority categories (e.g., show a Promise.all() waterfall fix, a barrel import refactor, a React.cache() usage)
Remove the 'When to Apply' section as it restates obvious triggers that Claude can infer from the skill description and context
Add a brief workflow section describing how to audit existing code against these rules (e.g., 'Check for waterfalls first → then audit imports → then review server components')
For the most impactful rules (async-parallel, bundle-barrel-imports), include inline before/after code snippets rather than requiring file lookups
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is mostly a reference index which is reasonably efficient, but the extensive listing of all 57 rules by name without actionable detail adds bulk without immediate utility. The 'When to Apply' section states things Claude would already know. | 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 listing rule names with brief descriptions, requiring the reader to look up separate files for any actual guidance. | 1 / 3 |
Workflow Clarity | The priority ordering provides a clear sequence for which optimizations to consider first, but there is no workflow for applying these rules, no validation steps, and no process for how to audit or refactor code using these guidelines. | 2 / 3 |
Progressive Disclosure | The skill is well-structured as an overview/index that clearly points to individual rule files and a compiled AGENTS.md document. References are one level deep and clearly signaled with file paths and descriptions of what each rule file contains. | 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
- secondsky/claude-skills
- Commit
88da5ff
- 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.