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

72%

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

Quality

Content

61%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-structured index that stays lean and organizes 57 rules into prioritized categories with clear pointers to per-rule detail files. Its main weaknesses are the absence of any executable code or commands in the body itself and an only-implicit workflow for locating and applying the relevant rule to a given task.

Suggestions

Include one short representative code example (e.g., a before/after for async-parallel) directly in SKILL.md so the highest-priority pattern is immediately actionable without opening a rule file.

Replace the loose 'Read individual rule files' instruction with an explicit 2-3 step navigation sequence: identify the task type → find the matching category/prefix in the table → open rules/<prefix>-<name>.md and apply the correct-pattern example.

Replace the two hardcoded example paths in 'How to Use' with a per-category listing of rule file paths so every reference is discoverable from SKILL.md alone.

Dimension	Reasoning	Score
Conciseness	The body is an efficient index: a priority table plus one-line rule summaries with no re-teaching of concepts Claude already knows. Minor padding remains — the 'When to Apply' section and opening line ('Comprehensive performance optimization guide...') largely restate the frontmatter description.	4 / 5
Actionability	Rule summaries give concrete, named directives ('Use Promise.all() for independent operations', 'Use next/dynamic for heavy components'), but the body contains no executable code or commands — all examples are delegated to the per-rule files, leaving key details out of the skill body itself.	3 / 5
Workflow Clarity	Navigation is implied via the priority table and rule prefixes, and 'Read individual rule files for detailed explanations' is a single unanchored instruction; there is no explicit sequence for how to select and apply rules during a task (e.g., match the task to a category, read the rule, apply the fix).	3 / 5
Progressive Disclosure	The body is a clean, well-signaled index with one-level-deep references (rules/*.md via 'How to Use' and AGENTS.md as the 'Full Compiled Document'), matching the good-structure anchor. It falls short of 5 because only two example rule paths are listed rather than a complete per-category pointer, and the referenced files could not be verified — no rules/ directory or AGENTS.md exists alongside SKILL.md.	4 / 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 and natural keywords in third-person voice. Its only weaknesses are minor: it does not enumerate concrete optimization capabilities and leaves a small overlap window via the generic 'performance improvements' trigger.

Dimension	Reasoning	Score
Specificity	It names the domain ('React and Next.js performance optimization guidelines') and several specific application areas ('writing, reviewing, or refactoring React/Next.js code', 'data fetching, bundle optimization'). It stops short of 5 because it never enumerates concrete capabilities such as eliminating request waterfalls or reducing bundle size.	4 / 5
Completeness	It explicitly answers both questions with concrete trigger phrases: the what ('React and Next.js performance optimization guidelines from Vercel Engineering') and the when ('This skill should be used when writing, reviewing, or refactoring React/Next.js code... Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements'), written in third person.	5 / 5
Trigger Term Quality	Good natural keyword coverage — 'React components', 'Next.js pages', 'data fetching', 'bundle optimization', 'performance improvements', 'refactoring' are phrases users would plausibly say. A few natural terms are missing (e.g., 'slow app', 're-renders', 'bundle size'), so it does not reach comprehensive synonym-level coverage.	4 / 5
Distinctiveness Conflict Risk	The React/Next.js performance niche is clear and mostly distinct from unrelated skills, but the generic phrase 'performance improvements' and the broad refactoring scope create minor overlap risk with general web-performance or React-style 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: zebbern/claude-code-guide
Path: skills/react-best-practices/SKILL.md
Commit: a2e6ee3

Reviewed: 2 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.