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.

87

1.51x
Quality

81%

Does it follow best practices?

Impact

97%

1.51x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

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 description with explicit trigger guidance and good framework-specific keywords. The main weakness is that it describes the domain and areas of focus rather than listing concrete optimization actions the skill enables. Adding specific techniques would strengthen the specificity dimension.

Suggestions

Add 2-3 concrete actions like 'implement code splitting, optimize images, configure caching strategies' to improve specificity

DimensionReasoningScore

Specificity

Names the domain (React/Next.js performance) and mentions some areas (components, pages, data fetching, bundle optimization) but doesn't list concrete actions like 'lazy load components', 'implement code splitting', or 'optimize images'.

2 / 3

Completeness

Clearly answers both what ('React and Next.js performance optimization guidelines') and when ('when writing, reviewing, or refactoring React/Next.js code' plus explicit 'Triggers on' clause listing specific scenarios).

3 / 3

Trigger Term Quality

Good coverage of natural terms users would say: 'React components', 'Next.js pages', 'data fetching', 'bundle optimization', 'performance improvements', plus the framework names React and Next.js that users commonly mention.

3 / 3

Distinctiveness Conflict Risk

Clear niche focused specifically on React/Next.js performance optimization from Vercel Engineering. The combination of framework-specific terms and performance focus makes it unlikely to conflict with general React skills or other performance tools.

3 / 3

Total

11

/

12

Passed

Implementation

72%

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

This skill excels at organization and progressive disclosure, presenting a comprehensive 57-rule reference in a scannable format with clear navigation to detailed documentation. However, it sacrifices actionability by not including any inline code examples, requiring Claude to always reference external files for executable patterns. The workflow for applying these rules during actual refactoring tasks could be more explicit.

Suggestions

Add 2-3 inline code examples for the most critical rules (e.g., async-parallel with Promise.all, bundle-barrel-imports showing correct import syntax) to make the skill immediately actionable without file lookups

Include a brief workflow section describing how to prioritize and sequence rule application when refactoring existing code (e.g., 'Start with CRITICAL rules, validate bundle size changes, then address MEDIUM priority')

DimensionReasoningScore

Conciseness

The content is lean and efficient, presenting 57 rules as a well-organized reference table without explaining basic React/Next.js concepts Claude already knows. Every section serves a clear purpose.

3 / 3

Actionability

While the rule names and categories are clear, the skill lacks executable code examples in the main document. It references external rule files for details but doesn't provide copy-paste ready patterns inline.

2 / 3

Workflow Clarity

The 'When to Apply' section provides clear triggers, and rules are prioritized by impact, but there's no explicit workflow for how to apply multiple rules, validate changes, or sequence optimizations during a refactoring task.

2 / 3

Progressive Disclosure

Excellent structure with a clear overview, priority table, quick reference sections, and well-signaled one-level-deep references to individual rule files and the full AGENTS.md document.

3 / 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
secondsky/claude-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.