react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. Use 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. Do NOT use for component API architecture or composition patterns (use react-composition-patterns instead).

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 ./packages/skills-catalog/skills/(quality)/react-best-practices/SKILL.md

Quality

Content

57%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 an efficiently written, well-organized index, but it functions as a pointer to a bundle that is not present: every referenced file (rules/*.md, AGENTS.md) is missing, so the skill ships no detailed, executable guidance. Fixing the bundle (or inlining the essential rules) would raise actionability, workflow clarity, and progressive disclosure together.

Suggestions

Include the referenced bundle files (rules/*.md for all 57 rules and AGENTS.md) or remove/replace the references — currently every pointer in 'How to Use' and 'Full Compiled Document' resolves to a nonexistent file.

Add minimal executable guidance inline (e.g., one short correct/incorrect code pair for the two CRITICAL categories) so the skill remains actionable even before the rule files are opened.

Verify the rule summaries for accuracy — 'async-dependencies - Use better-all for partial dependencies' references an API that does not appear to exist — and remove the 'When to Apply' section, which duplicates the frontmatter description.

Dimension	Reasoning	Score
Conciseness	The body is a lean index — 57 rules each get a single terse line with no concept explanations Claude already knows. Minor trimmable redundancy ('When to Apply' restates the description's triggers; the intro is marketing-tinged) keeps it below the 5 anchor.	4 / 5
Actionability	Rule one-liners name concrete APIs ('Use Promise.all() for independent operations', 'Use next/dynamic for heavy components'), but there is no executable code and the detailed guidance is delegated to rules/*.md files that are not present in the bundle, leaving key details missing — matching the 3 anchor rather than 4.	3 / 5
Workflow Clarity	A navigation sequence exists (priority table → category prefix → rule file), but the central step ('Read individual rule files... rules/async-parallel.md') points at files absent from the bundle, making the workflow unexecutable as shipped; the 'better-all' reference in async-dependencies also reads as an error.	3 / 5
Progressive Disclosure	The body is well structured as an index with clearly signaled one-level references (rules/*.md, AGENTS.md), but scored against the actual bundle: no references/, scripts/, assets/, rules/, or AGENTS.md exist, so the disclosure structure does not resolve to real files.	3 / 5
	Total	13 / 20 Passed

Description

87%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: it states what the skill covers, gives explicit 'Use when' and 'Triggers on' guidance, and disambiguates against a sibling skill. The only weaknesses are a slightly abstract 'what' ('guidelines') and a few missing natural trigger synonyms/extensions.

Dimension	Reasoning	Score
Specificity	Names the domain and several concrete action areas ('writing, reviewing, or refactoring React/Next.js code', 'data fetching, bundle optimization, or performance improvements') with only minor coverage gaps; falls short of the 5 anchor because the 'what' is framed as generic 'performance optimization guidelines' rather than a comprehensive list of specific actions.	4 / 5
Completeness	Explicitly answers both what ('React and Next.js performance optimization guidelines from Vercel Engineering') and when ('Use when writing, reviewing, or refactoring React/Next.js code... Triggers on tasks involving...') with concrete trigger phrases — a clear match for the 5 anchor.	5 / 5
Trigger Term Quality	Good coverage of natural terms users would say ('React components, Next.js pages, data fetching, bundle optimization, performance improvements'), but misses common synonyms and file extensions (e.g., .tsx, 'slow rendering', 'hydration'), so it does not reach the comprehensive 5 anchor.	4 / 5
Distinctiveness Conflict Risk	Has a clear niche and an explicit negative boundary ('Do NOT use for component API architecture or composition patterns (use react-composition-patterns instead)'), which minimizes conflict risk with closely related skills.	5 / 5
	Total	18 / 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: tech-leads-club/agent-skills
Path: packages/skills-catalog/skills/(quality)/react-best-practices/SKILL.md
Commit: 120b676

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