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.22x

Quality

82%

Does it follow best practices?

Impact

92%

1.22x

Average score across 3 eval scenarios

Securityby

Passed

No findings from the security scan

Quality

Content

65%

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, token-efficient rule catalog, but it is undermined by dangling references: the `rules/*.md` detail files and `AGENTS.md` it directs the reader to are absent, and it offers no executable code examples or explicit workflow. Actionability, workflow clarity, and progressive disclosure are all held at 2 by these gaps.

Suggestions

Create the referenced bundle files (`rules/*.md` per rule and the compiled `AGENTS.md`) or remove the dangling references, so the progressive-disclosure navigation actually resolves.

Add at least one concrete, executable code example (correct vs. incorrect) for each critical/high-priority rule, or ensure the rule files contain copy-paste-ready examples, to lift actionability.

Include a brief explicit workflow for applying the rules during refactoring — e.g. identify the relevant category by priority, apply the pattern, then verify the change preserves behavior — to add the validation checkpoints workflow_clarity rewards.

Dimension	Reasoning	Score
Conciseness	The body is a lean, categorized index where each rule is a single terse line (e.g. "`async-parallel` - Use Promise.all() for independent operations") with no padding or explanation of concepts Claude already knows, so it does not fall to the 2 anchor's "could be tightened".	3 / 3
Actionability	Rules give concrete, API-named directives (Promise.all, next/dynamic, React.cache) but the body contains no executable code examples, and the files it points to for detailed examples do not exist, leaving guidance incomplete per the 2 anchor.	2 / 3
Workflow Clarity	The priority table implies an apply-order and the "How to Use" section gives a single loose step, but there is no explicit multi-step workflow or validation checkpoints; the >50-line, multi-category skill does not qualify for the simple-skill 3 exception.	2 / 3
Progressive Disclosure	The overview-to-detail structure is conceptually sound and references are clearly signaled one level deep, but the referenced `rules/*.md` and `AGENTS.md` files do not exist, so navigation is broken and it cannot reach the 3 anchor for working one-level-deep references.	2 / 3
	Total	9 / 12 Passed

Description

100%

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 concisely states what the skill provides, when to use it, and the natural trigger terms a user would say, all in third person. It clearly defines a distinct React/Next.js performance niche.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions — "writing, reviewing, or refactoring React/Next.js code" — applied to a specific domain, matching the anchor for several specific concrete actions rather than the single-action anchor at 2.	3 / 3
Completeness	Explicitly answers both what ("performance optimization guidelines from Vercel Engineering") and when ("This skill should be used when..." / "Triggers on tasks involving..."), satisfying the explicit-trigger requirement that would otherwise cap at 2.	3 / 3
Trigger Term Quality	Covers natural user terms — "React components, Next.js pages, data fetching, bundle optimization, or performance improvements" — that a user would naturally say, with good variation; not merely technical jargon.	3 / 3
Distinctiveness Conflict Risk	The React/Next.js performance-optimization niche with domain-specific triggers is clearly distinguishable and unlikely to fire for unrelated skills; above the 2 anchor that still overlaps with similar skills.	3 / 3
	Total	12 / 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 — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: MODSetter/SurfSense
Path: .cursor/skills/vercel-react-best-practices/SKILL.md
Commit: 3b319ce

Reviewed: about 13 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.