vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. Use 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:supercent-io/skills-template --skill vercel-react-best-practices90
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
89%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 well-structured description with strong completeness and trigger term coverage. It clearly identifies when to use the skill and includes relevant keywords developers would naturally use. The main weakness is that the capabilities are described at a guideline/pattern level rather than listing specific concrete actions the skill enables.
Suggestions
Add specific concrete actions like 'implement code splitting, optimize images, configure lazy loading, reduce bundle size' to improve specificity
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (React/Next.js performance) and mentions some areas like 'data fetching, bundle optimization' but doesn't list concrete actions. Phrases like 'performance optimization guidelines' and 'optimal performance patterns' are somewhat abstract rather than specific actions like 'lazy load components' or 'implement code splitting'. | 2 / 3 |
Completeness | Clearly answers both what ('React and Next.js performance optimization guidelines') and when ('Use when writing, reviewing, or refactoring React/Next.js code') with explicit triggers listed ('Triggers on 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'. These are terms developers naturally use when discussing this domain. | 3 / 3 |
Distinctiveness Conflict Risk | Clear niche focused specifically on React/Next.js performance optimization from Vercel Engineering. The combination of framework-specific terms (React, Next.js) with performance focus creates a distinct trigger profile unlikely to conflict with general React skills or other performance tools. | 3 / 3 |
Total | 11 / 12 Passed |
Implementation
87%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a well-structured, highly actionable skill document that efficiently covers React/Next.js performance patterns. The priority-based organization and concrete code examples are excellent. The main weakness is the lack of validation/verification guidance for confirming optimizations are effective.
Suggestions
Add a 'Verification' section with commands/tools to validate optimizations (e.g., `next build --analyze`, Lighthouse scores, bundle size checks)
Include a brief workflow for applying optimizations: identify issue → apply pattern → verify improvement → commit
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is highly efficient with well-organized tables, concise rule listings, and code examples that demonstrate patterns without unnecessary explanation. It assumes Claude understands React/Next.js fundamentals and focuses on actionable patterns. | 3 / 3 |
Actionability | Provides fully executable TypeScript/TSX code examples with clear before/after patterns. The examples are copy-paste ready and cover the most critical optimization patterns with specific import paths and syntax. | 3 / 3 |
Workflow Clarity | While the priority ordering is clear and rules are well-categorized, there are no explicit validation checkpoints or feedback loops for applying these optimizations. Missing guidance on how to verify optimizations worked (e.g., bundle analysis, performance metrics). | 2 / 3 |
Progressive Disclosure | Excellent structure with a quick reference table, categorized rules with prefixes, key examples inline, and clear pointer to AGENTS.md for detailed explanations. One-level-deep reference with well-signaled navigation. | 3 / 3 |
Total | 11 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 10 / 11 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.