CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

72

1.15x
Quality

58%

Does it follow best practices?

Impact

96%

1.15x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

Fix and improve this skill with Tessl

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

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 catalog/index of 70 React and Next.js performance rules, with clear prioritization and categorization. However, it critically lacks actionable content — there are no code examples, no concrete implementation patterns, and no executable guidance within the skill itself. All substantive content is deferred to external rule files that are not provided in the bundle, making the skill essentially a table of contents without the book.

Suggestions

Add at least one concrete, executable code example per category (especially for CRITICAL categories like Eliminating Waterfalls and Bundle Size) showing the anti-pattern and the correct pattern inline.

Include the bundle rule files (e.g., rules/async-parallel.md, rules/bundle-barrel-imports.md) or at minimum provide the AGENTS.md compiled document so the referenced content actually exists.

Add a brief workflow section for how to apply these rules during code review or refactoring, including validation steps (e.g., 'Run bundle analyzer before/after to verify size reduction').

Trim the exhaustive rule listing — consider showing only the top 2-3 rules per category inline and deferring the full list to a reference file, which would improve conciseness while maintaining discoverability.

DimensionReasoningScore

Conciseness

The skill is mostly a catalog/index of 70 rules, which is useful as a reference, but the extensive listing of every rule name with one-line descriptions is quite long. The 'When to Apply' section explains obvious triggers Claude could infer. However, the table format and categorization add structure that justifies much of the length.

2 / 3

Actionability

The skill provides no executable code, no concrete examples, and no specific implementation guidance. It is essentially a table of contents listing rule names with brief descriptions, deferring all actual actionable content 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 provides a clear sequence for which optimizations to tackle first, and the 'When to Apply' section gives trigger conditions. However, there are no validation steps, no feedback loops for verifying performance improvements, and no process for how to apply multiple rules during a refactoring session.

2 / 3

Progressive Disclosure

The skill references individual rule files (e.g., 'rules/async-parallel.md') and a compiled 'AGENTS.md', which is good progressive disclosure structure. However, no bundle files are provided, so the referenced files don't actually exist, making the references non-functional. The SKILL.md itself is also quite long for what is essentially an index.

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 both purpose and trigger conditions. Its main weakness is that the capability description stays at a high level rather than listing specific optimization techniques, and the trigger terms are broad enough that they could activate for general React/Next.js work that isn't performance-related. The explicit 'Use when' and 'Triggers on' clauses are well-structured.

Suggestions

Add specific concrete actions like 'Implements code splitting, optimizes images with next/image, configures caching strategies, reduces bundle size, applies memoization patterns' to improve specificity.

Narrow trigger terms to reduce conflict risk—e.g., clarify that this should NOT trigger for general React/Next.js development but specifically when performance, speed, bundle size, or optimization is mentioned.

DimensionReasoningScore

Specificity

The description 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, or performance improvements).

3 / 3

Trigger Term Quality

Good coverage of natural terms users would say: 'React', 'Next.js', 'React components', 'Next.js pages', 'data fetching', 'bundle optimization', 'performance improvements', 'refactoring'. These are terms developers naturally 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%

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

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository
vercel-labs/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.