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 ./config/claude/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 the 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 'implements code splitting, optimizes images with next/image, configures caching strategies, reduces bundle size, applies memoization patterns' to improve specificity.
Add differentiating language to reduce conflict risk, e.g., 'Use this skill specifically for performance concerns, NOT for general React/Next.js feature development or routing configuration.'
| 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-related React/Next.js skills. | 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 well as a navigational index with excellent progressive disclosure and clear categorization by priority. However, it critically lacks actionability—there are zero code examples, no concrete implementation patterns, and all substantive guidance is deferred to external files. As a standalone skill, it tells Claude what rules exist but not how to apply any of them.
Suggestions
Add at least one concrete, executable code example per critical category (e.g., show a before/after for async-parallel using Promise.all(), or bundle-barrel-imports with direct import syntax) so the skill is actionable without requiring external file reads.
Include a brief workflow for how to apply these rules during code review or refactoring, e.g., '1. Identify category from priority table → 2. Check relevant rules → 3. Apply pattern → 4. Verify with build/test'.
For the top 3-5 highest-impact rules, inline the key pattern (even a 2-3 line code snippet) so Claude can act immediately without needing to read separate files.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is mostly a reference index, which is efficient for its purpose, but the introductory text ('Comprehensive performance optimization guide...maintained by Vercel') and the 'When to Apply' section explain things Claude can infer. The bulk is a well-organized list of rule names, which is lean, but the rule names alone without inline actionable guidance make this more of a table of contents than a skill. | 2 / 3 |
Actionability | The skill provides no concrete code examples, no executable commands, and no specific implementation guidance. It is entirely a catalog of rule names with brief one-line descriptions. All actual actionable content is deferred to external rule files, making the skill itself vague and non-actionable. | 1 / 3 |
Workflow Clarity | The priority table provides a clear sequence for which categories to address first, and the 'When to Apply' section gives trigger conditions. However, there are no validation checkpoints, no feedback loops, and no step-by-step workflow for actually applying these rules during a refactoring or review task. | 2 / 3 |
Progressive Disclosure | The content is well-structured as an overview/index with clear references to individual rule files (e.g., 'rules/async-parallel.md') and a compiled document ('AGENTS.md'). References are one level deep and clearly signaled, with good organization by category and priority. | 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.
2c6f6e8
Table of Contents
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.