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

74%

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 ./.agents/skills/vercel-react-best-practices/SKILL.md

Quality

Content

65%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.

A well-organized, token-efficient index that avoids over-explanation and gives concrete one-line directives for all 57 rules. Its main weaknesses are an implicit rather than explicit usage workflow and a progressive-disclosure chain whose referenced rule files and AGENTS.md are not actually present in the skill bundle.

Suggestions

Add an explicit usage workflow (e.g., 1. match the task to a category via the priority table, 2. locate rules by prefix, 3. read the specific rule file before refactoring, 4. consult AGENTS.md only when a full compiled view is needed) so the multi-step process doesn't have to be inferred.

Ship the referenced files — the rules/ directory and AGENTS.md do not exist in the bundle, leaving every reference in the body unresolvable; alternatively inline the most critical rules.

Use markdown links for references (e.g., [rules/async-parallel.md](rules/async-parallel.md)) instead of bare paths in a code block, and trim the 'When to Apply' section that duplicates the frontmatter description.

Dimension	Reasoning	Score
Conciseness	The one-line-per-rule index is tight and assumes Claude's competence with no padding or explanation of known React concepts, but 'When to Apply' substantially duplicates the frontmatter description and the 'How to Use' and 'Full Compiled Document' sections overlap — minor trim opportunities.	4 / 5
Actionability	Each rule carries a concrete directive ('Use Promise.all() for independent operations', 'Import directly, avoid barrel files') plus explicit file paths to read, but there is no inline code and all executable detail depends on external rule files, leaving minor gaps.	4 / 5
Workflow Clarity	The priority table signals ordering ('prioritized by impact to guide automated refactoring') but the actual usage sequence — pick a category, find rules by prefix, read the rule file, apply, and when to consult AGENTS.md versus individual rules — is only implicit, with no checkpoints for validating that a rule applies.	3 / 5
Progressive Disclosure	The body is structurally a clean one-level index ('Read individual rule files...', 'For the complete guide... AGENTS.md'), but none of the referenced files (rules/async-parallel.md, rules/bundle-barrel-imports.md, AGENTS.md) exist in the bundle, so the disclosure chain is broken and the paths are unresolvable.	3 / 5
	Total	14 / 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 explicit trigger guidance in third-person voice. Keyword coverage is good but misses several natural synonyms users would say, and the capability description stays at the 'guidelines' level rather than naming concrete content areas.

Dimension	Reasoning	Score
Specificity	Lists several concrete actions — 'writing, reviewing, or refactoring React/Next.js code', 'data fetching, bundle optimization' — but the artifact itself is described only generically as 'performance optimization guidelines', leaving minor gaps in coverage of what the skill actually contains.	4 / 5
Completeness	Explicitly answers both parts: the 'what' ('React and Next.js performance optimization guidelines from Vercel Engineering') and an explicit 'when' clause with concrete trigger phrases ('This skill should be used when writing, reviewing, or refactoring... Triggers on tasks involving React components, Next.js pages, data fetching...').	5 / 5
Trigger Term Quality	Good natural keyword coverage ('React components, Next.js pages, data fetching, bundle optimization, performance improvements'), but common user phrasings like 'slow rendering', 're-renders', 'loading times', or 'hydration' are missing, so it falls short of the comprehensive-with-synonyms anchor.	4 / 5
Distinctiveness Conflict Risk	The React/Next.js performance niche is mostly distinct, but broad trigger phrases like 'data fetching' and 'performance improvements' create minor overlap risk with general web-performance or code-review 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: Draculabo/AntigravityManager
Path: .agents/skills/vercel-react-best-practices/SKILL.md
Commit: ccea788

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.