react-performance

React and Next.js performance optimization patterns adapted from Vercel Engineering's React Best Practices (https://github.com/vercel-labs/agent-skills). Organizes 70+ rules across 8 priority categories — waterfalls, bundle size, server-side, client fetching, re-render, rendering, JS micro-perf, advanced. Use when writing, reviewing, or refactoring React/Next.js code for performance.

Quality

82%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No known issues

Quality

Content

65%

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

A highly actionable, well-organized pattern catalog with excellent executable code examples, but it is a monolithic single file that restates some React/JS fundamentals and lacks explicit validation checkpoints for review/refactor workflows.

Suggestions

Offload the bulkier category sections (e.g., sections 5–8) into reference files under references/ and keep SKILL.md as a concise overview with one-level-deep links, improving both conciseness and progressive disclosure.

Trim restatements of React/JS fundamentals Claude already knows (basic Promise.all, useMemo/useCallback, Map-vs-Array lookups, caching array length) to the non-obvious guidance only.

Add an explicit review workflow with validation checkpoints — e.g., measure with Lighthouse/Core Web Vitals before and after applying a fix, and re-measure to confirm no regression — to lift workflow clarity.

Dimension	Reasoning	Score
Conciseness	The body is mostly efficient and code-dense, but it restates React/JS fundamentals Claude already knows (Promise.all parallelization, useMemo/useCallback basics, Map vs Array.includes, caching arr.length, hoisting RegExp) and at ~570 lines could be tightened, matching the mostly-efficient-but-could-be-tighter anchor rather than the every-token-earns-its-place anchor at 3.	2 / 3
Actionability	It is packed with executable, copy-paste-ready TypeScript/TSX (INCORRECT/CORRECT pairs, specific APIs like React.cache(), after(), useTransition(), next/dynamic), matching the fully-executable anchor; guidance is concrete rather than descriptive.	3 / 3
Workflow Clarity	The Priority Index (CRITICAL → LOW) and "When to Activate" list provide an implicit review/refactor sequence, but there are no explicit validation checkpoints or validate→fix→retry feedback loops, matching the steps-present-but-checkpoints-missing anchor at 2 rather than the explicit-validation anchor at 3.	2 / 3
Progressive Disclosure	Internal section organization is clear (8 numbered categories, Priority Index, Related, Attribution) and cross-skill links exist, but no bundle files are present and all 570 lines of a 70+ rule catalog live inline in one file, matching the well-structured-but-content-that-should-be-separate-is-inline anchor at 2 rather than the appropriately-split anchor at 3.	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, third-person description that clearly states what the skill does, names its scope and categories, and provides an explicit "Use when" trigger. It is concrete, distinct, and free of fluff.

Dimension	Reasoning	Score
Specificity	The description lists concrete actions ("writing, reviewing, or refactoring React/Next.js code for performance") and enumerates the 8 optimization categories by name, matching the multiple-concrete-actions anchor rather than the vague single-action anchor at 2.	3 / 3
Completeness	It explicitly answers both what ("React and Next.js performance optimization patterns... Organizes 70+ rules across 8 priority categories") and when ("Use when writing, reviewing, or refactoring React/Next.js code for performance"), satisfying the explicit-trigger anchor; the presence of the "Use when" clause lifts it above the implied-only 2.	3 / 3
Trigger Term Quality	Natural trigger terms a user would say are well covered ("React", "Next.js", "performance", "reviewing", "refactoring", "code for performance"), matching the good-coverage anchor; the category names are technical but the "Use when" clause itself uses natural phrasing.	3 / 3
Distinctiveness Conflict Risk	The "React and Next.js performance" niche is specific and the triggers are scoped to performance work, making it unlikely to fire for general React pattern or testing skills; this matches the clear-niche-with-distinct-triggers anchor.	3 / 3
	Total	12 / 12 Passed

Validation

81%

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 — 13 / 16 Passed

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (576 lines); consider splitting into references/ and linking	Warning
metadata_version	'metadata.version' is missing	Warning
relative_links	Relative link issues: 6 suspicious	Warning

	Total	13 / 16 Passed

Repository: affaan-m/ECC
Commit: 754b8dd

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