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.
66
58%
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 domain (React/Next.js performance) and provides explicit trigger guidance. Its main weakness is that it describes the skill at a category level rather than listing specific concrete optimization techniques, and its triggers could overlap with general React/Next.js development skills. The description uses proper third-person voice and includes a good 'Use when' equivalent.
Suggestions
Add specific concrete actions like 'Guides code splitting, lazy loading, image optimization, memoization, server component usage, and caching strategies' to improve specificity.
Sharpen distinctiveness by clarifying this is specifically for performance patterns, not general React/Next.js development — e.g., 'Use when the user mentions slow rendering, large bundles, or performance bottlenecks in React/Next.js apps, NOT for general React development questions.'
| 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 a general React coding skill, a Next.js skill, or a general web performance skill. The 'performance optimization' focus helps distinguish it, but 'React components' and 'Next.js pages' are broad triggers that could conflict with non-performance-related 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 primarily as a table of contents for 45 performance rules rather than an actionable guide. While the categorization and prioritization are well-structured, the complete absence of concrete code examples, executable patterns, or specific before/after demonstrations means Claude cannot meaningfully apply any of these rules without accessing the referenced external files (which are not provided in the bundle). The skill would benefit greatly from including at least the top 3-5 highest-impact patterns with concrete code examples inline.
Suggestions
Add concrete, executable code examples for at least the top 5 highest-impact rules (e.g., async-parallel with Promise.all() before/after, bundle-barrel-imports with specific import path examples) directly in the SKILL.md
Include a 'Quick Wins' section at the top with 3-5 copy-paste ready patterns that cover the CRITICAL priority rules, so the skill is immediately actionable without external files
Add a workflow section describing how to audit existing code: e.g., 1) Check for sequential awaits → apply async-parallel, 2) Check bundle size → apply bundle rules, with verification steps like 'Run next build --analyze to confirm bundle reduction'
Either provide the referenced bundle files (rules/*.md, AGENTS.md) or inline the most critical rule content, since without them the skill provides no actionable guidance
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is reasonably organized but includes some unnecessary framing (e.g., 'Comprehensive performance optimization guide... maintained by Vercel' and the 'When to Apply' section which tells Claude things it can infer). The bulk of the content is a reference table/list which is efficient, but the 45-rule listing without actionable detail is borderline padding since the actual guidance lives in external files. | 2 / 3 |
Actionability | The skill provides only rule names and brief one-line descriptions with no executable code, no concrete examples, and no specific patterns to follow. It is essentially an index/table of contents pointing to external files, offering no copy-paste ready guidance. Claude cannot act on 'Use Promise.all() for independent operations' without the actual rule files. | 1 / 3 |
Workflow Clarity | The priority ordering provides a clear sequence for which optimizations to tackle first, and the categorization is logical. However, there are no validation steps, no feedback loops for verifying performance improvements, and no process for how to apply these rules during a refactoring workflow. | 2 / 3 |
Progressive Disclosure | The skill references external rule files (rules/async-parallel.md, etc.) and a compiled AGENTS.md, which is good structure. However, no bundle files were provided, so the references cannot be verified. The SKILL.md itself is mostly a flat listing without a concise quick-start section that provides immediately usable content before pointing to details. | 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.
- 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.