react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. Use 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.
87
88%
Does it follow best practices?
Impact
77%
1.24xAverage score across 3 eval scenarios
Passed
No known issues
Quality
Discovery
89%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 well-structured skill description with strong trigger terms and completeness. It clearly identifies when to use the skill and includes relevant keywords users would naturally mention. The main weakness is that the capabilities could be more specific about what concrete optimization actions it covers.
Suggestions
Add specific concrete actions like 'implement code splitting, optimize images, configure caching strategies, lazy load components' to improve specificity
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (React/Next.js performance) and mentions some actions (writing, reviewing, refactoring code), but lacks specific concrete actions like 'lazy load components', 'optimize bundle size', or 'implement code splitting'. The phrase 'performance optimization guidelines' is somewhat abstract. | 2 / 3 |
Completeness | Clearly answers both what ('React and Next.js performance optimization guidelines') and when ('Use when writing, reviewing, or refactoring React/Next.js code' plus explicit 'Triggers on' clause listing specific scenarios). Has explicit trigger guidance. | 3 / 3 |
Trigger Term Quality | Includes good coverage of natural terms: 'React', 'Next.js', 'React components', 'Next.js pages', 'data fetching', 'bundle optimization', 'performance improvements'. These are terms users would naturally use when seeking help with React/Next.js performance. | 3 / 3 |
Distinctiveness Conflict Risk | Clear niche focused specifically on React/Next.js performance optimization from Vercel Engineering. The combination of framework-specific terms (React, Next.js) with performance focus creates distinct triggers unlikely to conflict with general coding or other framework skills. | 3 / 3 |
Total | 11 / 12 Passed |
Implementation
87%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a well-structured, comprehensive performance optimization skill that efficiently presents 45 rules with clear prioritization and actionable code examples. The content respects Claude's intelligence by avoiding basic explanations while providing concrete, executable guidance. The main weakness is the lack of explicit workflow for applying these rules systematically with validation checkpoints.
Suggestions
Add a brief workflow section describing how to systematically apply these rules during code review (e.g., 'Check CRITICAL rules first → Measure bundle size → Apply HIGH priority rules → Verify with Lighthouse')
Include validation commands or tools for verifying optimizations (e.g., 'Run `next build --analyze` to verify bundle size reduction')
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is lean and efficient, using tables and bullet points to convey 45 rules across 8 categories without explaining basic React/Next.js concepts Claude already knows. Every section earns its place with actionable rule references. | 3 / 3 |
Actionability | Provides fully executable TypeScript/TSX code examples for critical patterns (Promise.all, dynamic imports, barrel file avoidance, functional setState). Examples are copy-paste ready with clear before/after comparisons. | 3 / 3 |
Workflow Clarity | While the priority ordering and categorization are clear, there's no explicit workflow for applying these rules during code review or refactoring. Missing validation checkpoints for verifying optimizations were successful (e.g., bundle size checks, performance measurements). | 2 / 3 |
Progressive Disclosure | Excellent structure with a quick reference table, categorized rules, key examples inline, and clear pointer to AGENTS.md for detailed explanations. One-level-deep references are well-signaled with related skills and external documentation links. | 3 / 3 |
Total | 11 / 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
- supercent-io/skills-template
- Commit
c033769
- 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.