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

58%

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Passed

No known issues

Fix and improve this skill with Tessl

tessl review fix ./plugins/react-best-practices/skills/react-best-practices/SKILL.md

Quality

Content

35%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This skill functions as a well-organized table of contents for 57 React/Next.js performance rules, but provides almost no actionable content on its own. Without the referenced rule files in the bundle, Claude has only rule names and one-line descriptions to work with, which is insufficient for concrete code generation or refactoring. The priority categorization is valuable, but the skill needs at least key examples for the CRITICAL-priority rules inline to be useful standalone.

Suggestions

Add concrete, executable code examples for at least the top 3-5 CRITICAL rules (e.g., async-parallel with Promise.all() before/after, bundle-barrel-imports with correct import syntax) so the skill is actionable even without bundle files.

Remove or significantly trim the 'When to Apply' section — Claude already knows when React performance optimization is relevant from the task context.

Include the bundle files (rule markdown files and AGENTS.md) so the progressive disclosure structure actually works, or inline the most impactful rules' content directly.

Add a brief validation/verification section — e.g., how to measure if an optimization helped (Lighthouse scores, bundle analyzer, React DevTools profiler) to improve workflow clarity.

Dimension	Reasoning	Score
Conciseness	The content is mostly a catalog/index of 57 rules organized by category. While the table and lists are reasonably efficient, the 'When to Apply' section explains obvious triggers Claude would already know, and the full enumeration of all 57 rule names without actionable detail adds bulk without proportional value. The introductory paragraph is also somewhat padded.	2 / 3
Actionability	The skill provides no concrete code examples, no executable commands, and no specific implementation guidance. It is essentially a table of contents listing rule names and categories, with all actual actionable content deferred to external rule files. Claude cannot act on 'async-parallel - Use Promise.all() for independent operations' without the referenced files.	1 / 3
Workflow Clarity	The priority ordering (1-8 by impact) provides a clear sequence for which optimizations to consider first, and the 'When to Apply' section gives reasonable triggers. However, there are no validation steps, no feedback loops for verifying optimizations worked, and no guidance on how to apply multiple rules together or resolve conflicts between them.	2 / 3
Progressive Disclosure	The skill references individual rule files (e.g., 'rules/async-parallel.md') and a compiled 'AGENTS.md', which is good structure. However, no bundle files are provided, so we cannot verify these references exist. The SKILL.md itself is essentially all index with no substantive content at the top level — it over-delegates without providing enough standalone value. The references are mentioned but not clearly signaled with links for each rule.	2 / 3
	Total	7 / 12 Passed

Description

82%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

This is a solid description that clearly communicates its domain (React/Next.js performance) and provides explicit trigger conditions. Its main weakness is a lack of specific concrete actions—it describes the category of work rather than listing the specific optimization techniques it covers. The broad triggers like 'React components' and 'Next.js pages' could cause it to activate for non-performance-related tasks.

Suggestions

Add specific concrete actions like 'implements code splitting, optimizes images with next/image, configures caching strategies, reduces bundle size, lazy loads components'

Narrow the trigger terms to be more performance-specific—'React components' alone is too broad; consider 'slow React components, render optimization, re-render issues, Core Web Vitals'

Dimension	Reasoning	Score
Specificity	Names the domain (React/Next.js performance optimization) and mentions some areas like 'data fetching, bundle optimization, performance improvements,' but doesn't list specific concrete actions (e.g., 'lazy load components, optimize images, implement code splitting, configure caching headers').	2 / 3
Completeness	Clearly answers both 'what' (React and Next.js performance optimization guidelines) and 'when' (writing/reviewing/refactoring React/Next.js code, with explicit triggers on components, pages, data fetching, bundle optimization, performance improvements).	3 / 3
Trigger Term Quality	Includes strong natural keywords users would say: 'React', 'Next.js', 'performance', 'React components', 'Next.js pages', 'data fetching', 'bundle optimization', 'refactoring'. These cover common terms a developer would use when seeking performance help.	3 / 3
Distinctiveness Conflict Risk	While it's specific to React/Next.js performance, it could overlap with general React coding skills, Next.js development skills, or broader web performance optimization skills. The 'React components' and 'Next.js pages' triggers are quite broad and could fire for non-performance-related React/Next.js tasks.	2 / 3
	Total	10 / 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 — 11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository: secondsky/claude-skills
Commit: 5e92b71

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