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.

Quality

71%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/vercel-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 body is a well-organized rule index with a sensible priority scheme, but it carries duplicated trigger guidance, offers only terse one-line heuristics with no executable examples, and depends entirely on an AGENTS.md file that is missing from the bundle. The disclosure design is sound but undelivered.

Suggestions

Remove the duplication between the 'When to Load' and 'When to Apply' sections, merging them into a single trigger/skip section.

Ship the referenced AGENTS.md in the skill bundle (or inline key incorrect/correct code examples for the CRITICAL rules), since it is the sole source of detailed guidance and is currently missing.

Add a brief explicit usage workflow, e.g., 'When writing or reviewing, scan categories in priority order, then look up the rule ID in AGENTS.md for the incorrect/correct example.'

Dimension	Reasoning	Score
Conciseness	There is no concept-explanation padding, but the 'When to Load' and 'When to Apply' sections duplicate nearly the same trigger list, and the priority table repeats information already conveyed by the Quick Reference headings. Mostly efficient but could be meaningfully tightened, matching the middle anchor.	3 / 5
Actionability	Rule one-liners name concrete APIs ('Use Promise.all()', 'Use React.cache()', 'next/dynamic'), but no executable code examples appear inline — the incorrect/correct examples are deferred to AGENTS.md, which is not present in the bundle. This is concrete but incomplete guidance.	3 / 5
Workflow Clarity	The CRITICAL-to-LOW priority ordering provides an implicit decision sequence, but no explicit process is stated for how to look up and apply a rule when writing or reviewing code. The sequence is present but implicit with no checkpoints, matching the middle anchor.	3 / 5
Progressive Disclosure	The structure is designed as a clean one-level index pointing to a single AGENTS.md, but that file does not exist anywhere in the bundle, leaving the sole disclosure path as a dangling reference. The quick reference becomes the only usable content, matching the anchor for references being effectively unusable rather than merely imperfectly signaled.	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 description that clearly states what the skill provides and when to use it, with concrete trigger phrases and a well-defined niche. Trigger term coverage is good but could add a few more natural user phrasings to be comprehensive.

Dimension	Reasoning	Score
Specificity	The description lists several concrete items ('writing, reviewing, or refactoring React/Next.js code', 'data fetching, bundle optimization, or performance improvements') but is guideline-oriented rather than comprehensive in its actions, matching the anchor for several specific actions with minor gaps in coverage.	4 / 5
Completeness	It explicitly answers both what ('React and Next.js performance optimization guidelines from Vercel Engineering') and when ('This skill should be used when writing, reviewing, or refactoring... Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements') with concrete trigger phrases, matching the top anchor.	5 / 5
Trigger Term Quality	Natural keywords users would say are well covered ('React components', 'Next.js pages', 'data fetching', 'bundle optimization', 'refactoring'), but common variations like 'slow renders', 'hydration', or 'make my app faster' are missing, falling just short of comprehensive synonym coverage.	4 / 5
Distinctiveness Conflict Risk	The Vercel React/Next.js performance niche is mostly distinct with specific triggers, but 'data fetching' and 'performance improvements' are broad enough to overlap with general web-performance or data-layer skills, indicating minor overlap risk with closely related skills.	4 / 5
	Total	17 / 20 Passed

Validation

93%

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 — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
relative_links	Relative link issues: 1 missing	Warning

	Total	15 / 16 Passed

Repository: CloudAI-X/claude-workflow-v2
Path: skills/vercel-react-best-practices/SKILL.md
Commit: 3b5a89e

Reviewed: 14 hours 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.