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.

1.02x

Quality

62%

Does it follow best practices?

Impact

98%

1.02x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/react-best-practices/SKILL.md

Evaluation results

100%

Dashboard Page Performance Refactor

Async waterfall elimination

Criteria

Without context

With context

Parallel independent fetches

100%

No sequential waterfall

100%

Suspense boundary present

100%

Suspense enables streaming

100%

Font hoisted to module level

100%

Font loaded once not per request

100%

Module-level font awaited correctly

100%

Component composition for RSC parallelism

100%

No unnecessary awaits in wrapper

100%

CHANGES.md explains improvements

100%

Task List Component Performance Audit

Re-render optimization patterns

Criteria

Without context

With context

No inline component definition

100%

TaskItem accepts props

100%

completedCount is derived not state

100%

useEffect for completedCount removed

100%

Functional setState in addTask

100%

Functional setState in toggleTask

100%

Stable addTask callback

100%

Stable toggleTask callback

100%

Lazy state initialization

100%

review.md identifies issues

100%

Ternary for conditional rendering

100%

94%

Next.js App Cold Start Optimization

Bundle optimization and server caching

Criteria

Without context

With context

Analytics deferred via dynamic import

100%

Analytics ssr: false

100%

RichTextEditor uses dynamic import

100%

RichTextEditor ssr: false

100%

optimizePackageImports configured

100%

optimizePackageImports includes lucide-react

100%

React.cache wraps getAuthUser

100%

React.cache uses primitive arg

50%

40%

React.cache not used for fetch calls

100%

OPTIMIZATION_NOTES.md present

100%

No static import of heavy libs in layout

50%

100%

Repository: vercel-labs/agent-skills
Commit: 73140fc

Evaluated: about 7 hours ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Dashboard Page Performance Refactor Task List Component Performance Audit Next.js App Cold Start Optimization

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.