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.
Install with Tessl CLI
npx tessl i github:am-will/codex-skills --skill vercel-react-best-practices82
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillValidation for skill structure
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 when to use the skill and covers relevant trigger terms. Its main weakness is the lack of specific concrete actions - it describes the domain well but doesn't enumerate what specific optimizations or techniques it covers, which could help both with selection accuracy and distinguishing it from general React/Next.js skills.
Suggestions
Add specific concrete actions like 'implement code splitting, lazy load components, optimize images, reduce bundle size, configure caching strategies'
Strengthen distinctiveness by emphasizing performance-specific triggers like 'slow page loads', 'large bundle size', 'Core Web Vitals', 'lighthouse scores'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (React/Next.js performance) and mentions some areas (components, pages, data fetching, bundle optimization) but doesn't list concrete actions like 'lazy load components', 'implement code splitting', or 'optimize images'. | 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' plus explicit 'Triggers on' clause listing specific scenarios). | 3 / 3 |
Trigger Term Quality | Good coverage of natural terms users would say: 'React components', 'Next.js pages', 'data fetching', 'bundle optimization', 'performance improvements'. These are terms developers naturally use when discussing these topics. | 3 / 3 |
Distinctiveness Conflict Risk | While it specifies React/Next.js performance, it could overlap with general React skills or Next.js development skills. The performance focus helps but 'React components' and 'Next.js pages' are broad triggers that might conflict with non-performance React/Next.js skills. | 2 / 3 |
Total | 10 / 12 Passed |
Implementation
72%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill excels at organization and progressive disclosure, providing a well-structured index of 45 performance rules with clear prioritization. However, it functions more as a table of contents than an actionable skill - the actual implementation guidance lives in external files, making the skill itself less immediately useful without those references loaded.
Suggestions
Include at least one concrete code example for the highest-priority rules (e.g., async-parallel with Promise.all pattern) to make the skill immediately actionable
Add a brief workflow section explaining how to prioritize and sequence rule application when multiple issues are present
Consider inlining the 2-3 most critical rules (CRITICAL priority) with their code examples, keeping lower-priority rules as references
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is lean and efficient, presenting 45 rules across 8 categories in a well-organized table and list format. It assumes Claude's competence with React/Next.js and doesn't waste tokens explaining basic concepts. | 3 / 3 |
Actionability | While the rule names and categories are clear, the skill itself contains no executable code examples - it only references external rule files. The quick reference provides rule IDs but not the actual implementation patterns needed to apply them. | 2 / 3 |
Workflow Clarity | The 'When to Apply' section provides clear triggers, and rules are prioritized by impact. However, there's no guidance on how to sequence applying multiple rules, validate improvements, or handle conflicts between rules. | 2 / 3 |
Progressive Disclosure | Excellent structure with a clear overview, priority table, quick reference sections, and well-signaled one-level-deep references to individual rule files and the full AGENTS.md document. | 3 / 3 |
Total | 10 / 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.
- 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.