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:secondsky/claude-skills --skill vercel-react-best-practices80
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 its purpose and includes explicit trigger guidance. The main weakness is the lack of specific concrete actions - it describes the domain well but doesn't enumerate what specific optimizations or patterns it covers. The distinctiveness could be improved by being more specific about what makes this different from general React/Next.js skills.
Suggestions
Add specific concrete actions like 'implement code splitting, optimize images with next/image, configure lazy loading, reduce bundle size' to improve specificity
Clarify what distinguishes this from general React/Next.js skills - perhaps mention specific patterns like 'Server Components', 'streaming', or 'ISR' that are unique to performance optimization
| 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, Next.js skills, or other performance-focused skills. The 'Vercel Engineering' source adds some distinction but the triggers are broad enough to potentially conflict. | 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, presenting a comprehensive 57-rule optimization guide in a scannable format with clear navigation to detailed rule files. However, it sacrifices actionability by not including any inline code examples, requiring Claude to always reference external files for executable guidance. The workflow for applying these rules during actual refactoring tasks could be more explicit.
Suggestions
Add 2-3 inline code examples for the most critical rules (e.g., async-parallel with Promise.all, bundle-barrel-imports showing correct import syntax) to make the skill immediately actionable
Include a brief workflow section describing how to prioritize and sequence rule application during a refactoring task (e.g., 'Start with CRITICAL rules, validate bundle size, then address HIGH priority items')
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is lean and efficient, presenting 57 rules as a well-organized reference table without explaining basic React/Next.js concepts Claude already knows. Every section serves a clear purpose. | 3 / 3 |
Actionability | While the rule names and categories are clear, the skill lacks executable code examples in the main document. It references external rule files for details but doesn't provide copy-paste ready patterns inline. | 2 / 3 |
Workflow Clarity | The 'When to Apply' section provides clear triggers, and rules are prioritized by impact, but there's no explicit workflow for how to apply multiple rules, validate changes, or sequence optimizations during a refactoring task. | 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
87%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 14 / 16 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
description_trigger_hint | Description may be missing an explicit 'when to use' trigger hint (e.g., 'Use when...') | Warning |
body_steps | No step-by-step structure detected (no ordered list); consider adding a simple workflow | Warning |
Total | 14 / 16 Passed | |
- 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.