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

73

Quality

66%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./packages/skills-catalog/skills/(quality)/react-best-practices/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Discovery

89%

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 well-structured skill description with strong completeness, excellent trigger terms, and clear boundary-setting via the 'Do NOT use' clause. Its main weakness is that the capabilities are described at a category level (data fetching, bundle optimization) rather than listing specific concrete actions the skill enables. Overall, it would perform well in a multi-skill selection scenario.

Suggestions

Add more specific concrete actions to improve specificity, e.g., 'Guides lazy loading, code splitting, image optimization, memoization, server component usage, and efficient data fetching patterns.'

DimensionReasoningScore

Specificity

Names the domain (React/Next.js performance optimization) and mentions some areas like 'data fetching, bundle optimization, performance improvements,' but doesn't list concrete specific actions (e.g., 'lazy load components,' 'configure code splitting,' 'optimize image loading'). It describes guidelines rather than discrete actions.

2 / 3

Completeness

Clearly answers both 'what' (React and Next.js performance optimization guidelines) and 'when' (explicit 'Use when' clause for writing/reviewing/refactoring, plus 'Triggers on' clause listing specific task types). Also includes a helpful 'Do NOT use' boundary condition.

3 / 3

Trigger Term Quality

Includes strong natural keywords users would say: 'React components,' 'Next.js pages,' 'data fetching,' 'bundle optimization,' 'performance improvements,' 'refactoring,' 'React/Next.js code.' These cover a good range of terms a user would naturally use when seeking performance help.

3 / 3

Distinctiveness Conflict Risk

Explicitly distinguishes itself from a related skill ('react-composition-patterns') with a 'Do NOT use' clause, and narrows its scope specifically to performance optimization rather than general React/Next.js development. This makes it clearly distinguishable.

3 / 3

Total

11

/

12

Passed

Implementation

42%

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

This skill functions well as a table of contents and navigation aid for a large rule set, with excellent progressive disclosure and clear categorization. However, it critically lacks actionability—there are no code examples, concrete patterns, or executable guidance in the skill itself, making it essentially an index rather than a teaching document. Without at least a few inline examples of the highest-priority patterns, Claude would need to read many external files before being able to act on any of the guidance.

Suggestions

Add 2-3 inline code examples for the CRITICAL priority rules (e.g., async-parallel with Promise.all(), bundle-barrel-imports showing correct vs incorrect import), so Claude can act on the most impactful patterns without reading external files.

Include a brief workflow section describing how to apply these rules during a code review or refactoring session (e.g., 'Start with waterfalls → check bundle size → verify with Lighthouse/bundle analyzer').

Remove or condense the LOW and LOW-MEDIUM priority rule listings to just category references (e.g., 'See rules/js-*.md for 12 JavaScript micro-optimizations') to reduce token usage on less impactful content.

DimensionReasoningScore

Conciseness

The content is mostly a reference index of 57 rules organized by category, which is useful but somewhat verbose. The rule listings are essentially just names without actionable detail, and the introductory text ('Comprehensive performance optimization guide...maintained by Vercel') adds little value. The priority table and 'When to Apply' section are reasonable but could be tighter.

2 / 3

Actionability

The skill provides no concrete code examples, commands, or executable guidance. It is entirely a catalog of rule names with brief labels, deferring all actual implementation details to external rule files. Claude cannot act on 'async-parallel - Use Promise.all() for independent operations' without the actual patterns and code.

1 / 3

Workflow Clarity

The priority ordering provides a clear sequence for which optimizations to tackle first, and the 'When to Apply' section gives reasonable triggers. However, there are no validation steps, no workflow for applying rules during a refactoring session, and no guidance on how to verify improvements after applying optimizations.

2 / 3

Progressive Disclosure

The skill is well-structured as an overview/index that clearly points to individual rule files (e.g., 'rules/async-parallel.md') and a compiled document ('AGENTS.md'). References are one level deep and clearly signaled, with good organization by category and priority.

3 / 3

Total

8

/

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