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.
62
52%
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 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 a lack of specific concrete actions (it describes the domain rather than listing particular optimization techniques) and some potential overlap with general React/Next.js development skills.
Suggestions
Add specific concrete actions like 'implement code splitting, optimize images with next/image, configure caching strategies, reduce bundle size, lazy load components' to improve specificity.
Add distinguishing language to reduce conflict risk, e.g., 'Use this skill specifically for performance concerns, NOT for general React/Next.js feature development or styling.'
| 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 conflict with non-performance-focused React/Next.js skills. | 2 / 3 |
Total | 10 / 12 Passed |
Implementation
22%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 table of contents rather than an actionable guide. It catalogs 45 rules across 8 categories with brief descriptions but provides zero executable code examples, no concrete implementation patterns, and no workflow for applying the rules. Without the referenced bundle files (which are not provided), the skill offers almost no actionable value to Claude.
Suggestions
Add at least one concrete, executable code example per critical category (e.g., show a before/after for async-parallel with Promise.all(), or bundle-barrel-imports with direct import paths) so the skill is actionable even without bundle files.
Include a diagnostic workflow: e.g., 'When reviewing React code for performance: 1. Check for sequential awaits (waterfall pattern) → apply async rules. 2. Check bundle imports → apply bundle rules. 3. Validate with lighthouse/profiling.'
Provide the actual bundle files (rule markdown files) or inline the top 3-5 highest-impact rules with full code examples so the skill has standalone value.
Remove the 'When to Apply' section and the introductory paragraph — Claude can infer when to use React/Next.js performance rules from context.
| 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 it's essentially a table of contents. | 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 one-line descriptions, deferring all actual content to external rule files. Claude cannot act on 'Use Promise.all() for independent operations' without the referenced files, and no bundle files are provided. | 1 / 3 |
Workflow Clarity | There is no workflow, sequence, or process described. The skill is a flat reference index with no guidance on how to apply rules in sequence, how to diagnose performance issues, or how to validate improvements. The priority table hints at ordering but provides no actionable workflow. | 1 / 3 |
Progressive Disclosure | The skill attempts progressive disclosure by referencing individual rule files (rules/async-parallel.md, etc.) and a compiled AGENTS.md, which is a reasonable structure. However, no bundle files are provided, so the references are unverifiable. The SKILL.md itself is essentially only a table of contents with no substantive quick-start content, making it too thin as a standalone overview. | 2 / 3 |
Total | 6 / 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
- am-will/codex-skills
- Commit
d3983b1
- 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.