CtrlK
BlogDocsLog inGet started
Tessl Logo

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).

68

Quality

81%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

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

A well-organized rule index that stays lean and actionable while cleanly deferring detail to referenced files. Its main weakness is that the referenced rule files and compiled AGENTS.md are not present in the bundle, leaving dangling navigation paths.

Suggestions

Ship the referenced bundle (rules/*.md and AGENTS.md) alongside SKILL.md, or remove the file-path references if the rules are not bundled, so progressive-disclosure navigation does not dangle.

Replace the 'How to Use' prose with an explicit numbered lookup workflow (e.g., 1. identify the failing category by priority -> 2. locate the matching rule prefix -> 3. open rules/<rule>.md -> 4. apply the correct pattern) to raise workflow clarity.

Drop the 'maintained by Vercel' branding sentence from the body since the same provenance already appears in frontmatter metadata.

DimensionReasoningScore

Conciseness

Lean index of one-line rule descriptions with a priority table and no padding of concepts Claude already knows; the intro branding line ('maintained by Vercel') and the 'How to Use' file-contents explanation are mild over-explanation that could be trimmed.

4 / 5

Actionability

Each rule is a concrete, actionable prescription with specific APIs ('Use Promise.all()', 'Use next/dynamic for heavy components', 'Import directly, avoid barrel files'); no inline executable code, but the skill is an index so actionable guidance is sufficient per the instruction-skill note.

4 / 5

Workflow Clarity

The priority table gives a clear ranking sequence and 'When to Apply' defines entry conditions, but the lookup workflow (pick category by priority -> find rule -> read rule file -> apply) is implied rather than made fully explicit, with no validation checkpoint.

4 / 5

Progressive Disclosure

Good overview-to-detail structure with clearly signaled one-level-deep references ('Read individual rule files...', 'For the complete guide... AGENTS.md'); however the referenced paths (rules/*.md, AGENTS.md) are not present in the shipped bundle, so the navigation points to files the package does not contain.

4 / 5

Total

16

/

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 well-crafted description that explicitly covers what, when, and conflict boundaries with natural trigger terms. Minor specificity gains are available by naming concrete optimization actions rather than only task categories.

DimensionReasoningScore

Specificity

Names the domain and several concrete trigger areas ('writing, reviewing, or refactoring React/Next.js code', 'data fetching, bundle optimization, performance improvements'), but stops at task categories rather than enumerating the underlying optimization actions, leaving minor coverage gaps.

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... Triggers on tasks involving...') with concrete trigger phrases.

5 / 5

Trigger Term Quality

Good natural keyword coverage with phrases users would actually say ('React components', 'Next.js pages', 'bundle optimization', 'performance improvements'); a few common synonyms (e.g., 'SSR', 'rendering', 'hydration') are absent.

4 / 5

Distinctiveness Conflict Risk

Clear niche with explicit conflict avoidance ('Do NOT use for component API architecture or composition patterns (use react-composition-patterns instead)'), minimizing the risk of triggering for the wrong skill.

5 / 5

Total

18

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
tech-leads-club/agent-skills
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.