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.
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 its domain (React/Next.js performance) and provides explicit trigger guidance. Its main weakness is a lack of specific concrete actions—it describes the category of work rather than listing the particular optimization techniques it covers. The trigger terms are natural and well-chosen, though the broad scope of some triggers (e.g., 'React components') could cause conflicts with other React-related skills.
Suggestions
Add specific concrete actions the skill covers, e.g., 'Guides code splitting, lazy loading, image optimization, memoization, server component usage, and caching strategies.'
Narrow the trigger scope to reduce conflict risk—consider specifying 'Use when the user asks about React/Next.js performance, slow rendering, large bundle sizes, or optimization techniques' rather than broadly triggering on any React component work.
| 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, 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 terms a developer would use when seeking performance help. | 3 / 3 |
Distinctiveness Conflict Risk | While it's specific to React/Next.js performance, it could overlap with general React coding skills, Next.js development skills, or broader frontend performance skills. 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
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 as a well-organized index/table of contents for React/Next.js performance rules, with excellent progressive disclosure and categorization. However, it critically lacks actionability—there are zero code examples, zero concrete patterns, and all substantive content is deferred to external files. Without at least a few inline examples of the highest-priority patterns, Claude has no executable guidance from this file alone.
Suggestions
Add 2-3 concrete, executable code examples for the CRITICAL priority rules (e.g., show a before/after for async-parallel with Promise.all(), or bundle-barrel-imports with direct import paths) so Claude can act without reading external files.
Include a brief workflow for applying optimizations: profile/identify → apply rule → verify improvement, with specific measurement commands or techniques.
Remove the 'When to Apply' section—Claude already knows when React performance optimization is relevant given the skill description and context.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is mostly a reference catalog of 57 rules organized by category, which is useful but could be tightened. The introductory text and 'When to Apply' section explain things Claude already knows (when to optimize React code). The rule listings themselves are lean, but the sheer volume of rule names without actionable content is borderline padding. | 2 / 3 |
Actionability | The skill provides no concrete code examples, no executable commands, and no specific implementation guidance. It is essentially a table of contents listing rule names with one-line descriptions, deferring all actual content to external rule files. Claude cannot act on 'async-parallel - Use Promise.all() for independent operations' without the actual rule content. | 1 / 3 |
Workflow Clarity | The priority ordering provides a clear sequence for which optimizations to tackle first, and the 'When to Apply' section gives trigger conditions. However, there are no validation steps, no workflow for applying rules (e.g., profile first, then apply, then measure), and no feedback loops for verifying improvements. | 2 / 3 |
Progressive Disclosure | The content is well-structured as an overview with clear navigation to individual rule files (rules/*.md) and a compiled document (AGENTS.md). References are one level deep, clearly signaled, and the categorization makes discovery easy. | 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.
- Repository
- freekmurze/dotfiles
- Commit
05d40bb
- 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.