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

65%

Does it follow best practices?

Impact

96%

1.15x

Average score across 3 eval scenarios

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/react-best-practices/SKILL.md

Quality

Content

46%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The SKILL.md body is a well-organized, token-efficient index of 70 prioritized rules, but it is undermined by missing bundle files: the referenced rules/*.md and AGENTS.md do not exist, leaving no executable code examples and breaking progressive disclosure.

Suggestions

Ship the referenced bundle files (rules/*.md with code examples and the compiled AGENTS.md) so the progressive-disclosure pointers resolve and the skill becomes actionable.

Add at least one inline executable code example per CRITICAL category (e.g. async-parallel, bundle-barrel-imports) so the body provides concrete guidance even before opening rule files.

Tighten the overlap between the 'When to Apply' and 'How to Use' sections, and add a short explicit lookup workflow (identify category by priority -> open the matching rule file -> apply the correct pattern).

Dimension	Reasoning	Score
Conciseness	The body is a lean index of 70 rules, each a one-line directive with no padding or explanation of concepts Claude already knows; minor redundancy between 'When to Apply' and 'How to Use' keeps it from a 5.	4 / 5
Actionability	Rules are high-level directives ('Use Promise.all() for independent operations') with no executable code or commands in the body, and the rule files that would contain code examples are referenced but do not exist in the bundle.	2 / 5
Workflow Clarity	A priority-ordered category table and 'When to Apply' / 'How to Use' sections give a rough sequence (identify category, read rule file), but there is no explicit multi-step workflow and the referenced detail files are missing.	3 / 5
Progressive Disclosure	The design points one level deep to rules/*.md and AGENTS.md, but none of those bundle files are present, so the inlined 70-rule index is content that belongs in separate files and navigation to the referenced detail is broken.	2 / 5
	Total	11 / 20 Passed

Description

83%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, well-structured description that clearly states what the skill provides and when to use it, with concrete trigger phrases and good keyword coverage. Main weakness is that the 'what' is framed as guidelines rather than concrete capabilities, and a few trigger terms are generic.

Dimension	Reasoning	Score
Specificity	Names the domain ('React and Next.js performance optimization guidelines') and several concrete action areas ('writing, reviewing, or refactoring', 'data fetching, bundle optimization'), though the core 'what' is framed as guidelines rather than discrete actions.	4 / 5
Completeness	Explicitly answers both 'what' (performance optimization guidelines for React/Next.js) and 'when' ('should be used when writing, reviewing, or refactoring' plus 'Triggers on tasks involving...') with concrete trigger phrases.	5 / 5
Trigger Term Quality	Includes natural phrases users would say ('React components', 'Next.js pages', 'data fetching', 'bundle optimization', 'performance improvements') with good coverage, though a few common synonyms are absent.	4 / 5
Distinctiveness Conflict Risk	Has a clear niche (React/Next.js performance from Vercel) with distinct triggers, but terms like 'performance improvements' and 'data fetching' are somewhat broad and could overlap with general web-performance skills.	4 / 5
	Total	17 / 20 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 — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: vercel-labs/agent-skills
Path: skills/react-best-practices/SKILL.md
Commit: b8caa26

Reviewed: 4 days 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.