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

61%

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

Quality

Content

38%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 SKILL.md body is a well-organized rule catalog but functions as an inlined directory rather than actionable guidance: it lacks executable examples, references rule files and AGENTS.md that are not present in the bundle, and provides no validation-backed workflow for the refactoring tasks it triggers.

Suggestions

Replace or supplement the inline 57-rule listing with concrete, copy-paste code examples for the highest-priority (CRITICAL) rules so Claude can act directly from SKILL.md.

Create the referenced rules/*.md files and AGENTS.md (or remove the dangling references) so progressive disclosure points at real, one-level-deep materials.

Add a short sequenced workflow with validation checkpoints for review/refactoring tasks (e.g., identify waterfall -> apply pattern -> verify bundle/performance delta) to raise workflow clarity above a hint-level 2.

Dimension	Reasoning	Score
Conciseness	The body is mostly an efficient catalog of rule names with one-line glosses and no padded explanations of concepts Claude already knows, but it inlines 57 rule entries (≈120 lines) that read as a directory listing rather than earning each token as guidance.	3 / 5
Actionability	Guidance is high-level hints only ('Move await into branches', 'Use Promise.all() for independent operations') with no executable code or concrete commands in SKILL.md; the actual steps live in unstored rule files, so it describes rather than instructs.	2 / 5
Workflow Clarity	There is a rough priority sequence (categories ranked 1–8) and a 'How to Use' pointer, but no sequenced workflow with validation checkpoints for the refactoring/review operations it triggers.	2 / 5
Progressive Disclosure	It signals one-level-deep references ('Read individual rule files', 'Full Compiled Document: AGENTS.md') but the referenced paths (rules/*.md, AGENTS.md) do not exist in the bundle, and 57 inline rule entries should themselves live in those separate files rather than the overview.	2 / 5
	Total	9 / 20 Passed

Description

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

The description is specific, third-person, and provides clear 'what' and 'when' guidance with concrete trigger terms. It is among the stronger examples, with only minor room to add more action synonyms.

Dimension	Reasoning	Score
Specificity	Names the domain (React/Next.js performance) and several concrete actions ('writing, reviewing, or refactoring React/Next.js code', 'data fetching', 'bundle optimization'), with minor coverage gaps such as no explicit mention of profiling or measurement actions.	4 / 5
Completeness	Clearly answers 'what' ('React and Next.js performance optimization guidelines... to ensure optimal performance patterns') and 'when' ('This skill should be used when... Triggers on tasks involving...') with concrete trigger phrases.	5 / 5
Trigger Term Quality	Includes natural phrases users would say ('React components', 'Next.js pages', 'data fetching', 'bundle optimization', 'performance improvements'); a few common synonyms or explicit file/extension triggers are missing.	4 / 5
Distinctiveness Conflict Risk	Targets a clear niche (Vercel React/Next.js performance) with specific triggers unlikely to collide with unrelated skills, and is attributed to a distinct source ('from Vercel Engineering').	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: freekmurze/dotfiles
Path: config/claude/skills/vercel-react-best-practices/SKILL.md
Commit: a7899fe

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.