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.

1.15x

Quality

52%

Does it follow best practices?

Impact

66%

1.15x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./data/03-developer-reactbestpractices/SKILL.md

Quality

Content

22%

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 table of contents rather than an actionable guide. While the categorization and priority ranking are well-structured, the complete absence of executable code examples, concrete patterns, or workflow guidance means Claude cannot apply any of these 45 rules without accessing external files that aren't provided. The skill would benefit enormously from including at least the top 5-10 highest-impact patterns with concrete before/after code examples inline.

Suggestions

Add concrete, executable before/after code examples for at least the CRITICAL priority rules (e.g., show Promise.all() pattern for async-parallel, show direct import vs barrel import for bundle-barrel-imports)

Include a workflow or decision tree for applying these rules during code review — e.g., 'When reviewing a component: 1. Check for sequential awaits → apply async-parallel, 2. Check imports for barrel files → apply bundle-barrel-imports'

Add a quick-reference section with the top 5 most impactful patterns fully expanded inline so Claude can act without reading external files

Remove the 'When to Apply' section — Claude can infer when React/Next.js performance guidelines are relevant from context

Dimension	Reasoning	Score
Conciseness	The content is reasonably organized but includes some unnecessary framing (e.g., 'Comprehensive performance optimization guide... maintained by Vercel' and the 'When to Apply' section which tells Claude things it can infer). The bulk of the content is a reference table/list which is efficient, but the 45-rule listing without actionable detail is borderline padding since the actual guidance lives in referenced files.	2 / 3
Actionability	The skill provides only rule names and brief one-line descriptions with no executable code, no concrete examples, and no specific patterns to follow. It essentially serves as a table of contents pointing to external files, giving Claude no actionable guidance it can directly apply without reading those files.	1 / 3
Workflow Clarity	There is no workflow, sequence, or process described. The skill is a flat catalog of rules with no guidance on how to apply them during code review or refactoring, no decision tree for which rules to check, and no validation steps to confirm optimizations are correct.	1 / 3
Progressive Disclosure	The skill does reference external files (rules/*.md, AGENTS.md, _sections.md) and organizes content into categories with a priority table, which is reasonable structure. However, since no bundle files are provided, we cannot verify these references exist, and the SKILL.md itself contains almost no usable content — it's essentially all disclosure with no substance at the top level.	2 / 3
	Total	6 / 12 Passed

Description

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 conditions. Its main weakness is that it describes the skill at a guideline/category level rather than listing specific concrete optimization techniques, and its triggers are broad enough that it could conflict 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.

Narrow the trigger conditions to reduce conflict risk—e.g., clarify that this should NOT trigger for general React/Next.js development but only when performance, speed, bundle size, or optimization is explicitly mentioned.

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 web performance optimization skills. The 'React components' and 'Next.js pages' triggers are quite broad and could fire for non-performance-related React/Next.js tasks.	2 / 3
	Total	10 / 12 Passed

Validation

100%

Warnings & errors only

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: majiayu000/claude-skill-registry-data
Commit: 5a9e167

Reviewed: 1 day ago

Table of Contents

Discovery Implementation Validation

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.