CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

react-best-practices

Vercel's React and Next.js performance rules (70 rules in 8 categories ordered by impact - eliminating waterfalls, bundle size, server-side performance, client-side data fetching, re-renders, rendering performance, JavaScript performance, and advanced patterns). Use when writing, reviewing, or refactoring React components, Next.js pages, or data fetching for performance. Not an accessibility or TypeScript style guide.

Quality

80%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Failed to scan

The risk profile of this skill

Fix and improve this skill with Tessl

tessl review fix ./skills/react-best-practices/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

68%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 a well-organized, token-efficient index of 70 rules with concrete one-line technique directives per rule and clear pointers to detailed per-rule files and a compiled document. Its weaknesses are the absence of any explicit usage workflow or validation checkpoints (usage sequence is only implied by the priority table) and referenced files that are not present in the provided bundle to verify.

Suggestions

Add a short 'How to review code' step sequence (e.g., 1. identify the category matching the code pattern, 2. read the rule file for the exact pattern, 3. confirm the incorrect-code example matches before refactoring) so the workflow is explicit rather than implied by the priority table.

Inline one or two brief code snippets for the top CRITICAL rules (e.g., async-parallel with Promise.all) so the highest-impact guidance is actionable without opening a rule file.

Replace the 'When to Apply' section, which restates the frontmatter description, with the pointer to the rules directory and the priority table alone, or trim it to only the triggers not already in the description.

DimensionReasoningScore

Conciseness

The body is a dense index: 70 rule IDs each with a terse one-line directive and no React-basics padding or concept explanations Claude already knows. Minor trimmable redundancy keeps it below anchor 5 — the 'When to Apply' section restates the frontmatter triggers almost verbatim, and 'Each rule file contains: Brief explanation of why it matters...' explains what a rule file obviously holds.

4 / 5

Actionability

Each rule summary names a concrete technique to apply ('Use Promise.all() for independent operations', 'Use next/dynamic for heavy components', 'Use React.cache() for per-request deduplication', 'Use startTransition for non-urgent updates'), which is specific, executable guidance for an instruction/index skill. No inline code examples or commands appear in the body itself — those are deferred to the per-rule files — so it does not reach anchor 5's copy-paste-ready level but exceeds anchor 3's vague/pseudocode level.

4 / 5

Workflow Clarity

The priority table ('CRITICAL' through 'LOW') implies a triage order and 'How to Use' directs the reader to individual rule files, but no explicit step sequence is spelled out (e.g., how to systematically review a component, or how to pick and apply a rule), and there are no validation checkpoints or feedback loops. This matches anchor 3 — sequence present but implicit, checkpoints missing — rather than anchor 4's 'clear sequence with most checkpoints present'.

3 / 5

Progressive Disclosure

Good structure: overview, priority table, per-category quick-reference lists, and clearly signaled one-level-deep references ('Read individual rule files for detailed explanations... rules/async-parallel.md' and 'For the complete guide with all rules expanded: AGENTS.md'). However, no bundle files (references/, scripts/, assets/) are provided alongside SKILL.md, so the referenced rule files and AGENTS.md cannot be verified to exist — a minor organization gap that keeps it below anchor 5.

4 / 5

Total

15

/

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 names the source and scope, enumerates all eight rule categories, gives an explicit 'Use when...' trigger clause covering writing, reviewing, and refactoring, and closes with a clear negative boundary. The only gaps are a few natural synonyms and file extensions in the trigger terms.

DimensionReasoningScore

Specificity

The description lists several concrete items — all 8 named categories ('eliminating waterfalls, bundle size, server-side performance, client-side data fetching, re-renders, rendering performance, JavaScript performance, and advanced patterns') plus three action verbs ('writing, reviewing, or refactoring React components'). It sits between anchor 3 (1-2 concrete actions) and anchor 5 (comprehensive capability actions): the categories are concrete, but the stated actions are use-context verbs rather than an enumeration of what the skill does, so it is not fully comprehensive.

4 / 5

Completeness

Clearly answers both: what ('Vercel's React and Next.js performance rules (70 rules in 8 categories ordered by impact...)') and when ('Use when writing, reviewing, or refactoring React components, Next.js pages, or data fetching for performance'), with a concrete negative boundary ('Not an accessibility or TypeScript style guide'). This matches the anchor-5 pattern of explicit what AND when with concrete trigger phrases; anchor 4's 'when could be more explicit' does not apply since the trigger clause is fully specified.

5 / 5

Trigger Term Quality

Good natural-phrase coverage: 'React components', 'Next.js pages', 'data fetching', 're-renders', 'bundle size', and 'refactoring React' are things users actually say. Missing common synonyms ('optimize', 'speed up', 'slow') and file extensions (.tsx/.jsx) that the anchor-5 example requires, so it falls between 'some relevant keywords' (3) and 'comprehensive including synonyms and extensions' (5).

4 / 5

Distinctiveness Conflict Risk

Clear niche (React/Next.js performance specifically) with distinct triggers and an explicit exclusion ('Not an accessibility or TypeScript style guide') that reduces overlap with adjacent skills. Conflict risk with a generic React style-guide or accessibility skill is minimal, matching anchor 5 rather than anchor 4's 'minor overlap risk with closely related skills'.

5 / 5

Total

18

/

20

Passed

Validation

81%

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

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

metadata_field

'metadata' should map string keys to string values

Warning

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

13

/

16

Passed

Repository

vercel/vercel-plugin

Path

skills/react-best-practices/SKILL.md

Reviewed

Table of Contents

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.