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

Quality

82%

Does it follow best practices?

Impact

72%

1.28x

Average score across 3 eval scenarios

Securityby

Passed

No findings from the security scan

Evaluation results

56%

20%

Dashboard API Performance Overhaul

Async waterfall elimination and server-side performance

Criteria

Baseline

With context

Promise.all for independent fetches

100%

Early promise initiation

better-all for partial deps

after() for non-blocking logging

100%

after() import from next/server

100%

Auth check in server action

No sequential awaits for independent ops

100%

React.cache for auth deduplication

CHANGES.md documents optimizations

100%

Functional correctness preserved

100%

33%

Slow Initial Load Time Investigation

Bundle size optimization and dynamic imports

Criteria

Baseline

With context

Direct icon imports

100%

optimizePackageImports config

100%

Dynamic import for editor

100%

Editor ssr: false

100%

Analytics deferred

100%

Preload on hover/focus

100%

typeof window check in preload

100%

No static barrel import remaining

100%

No static Analytics import

100%

62%

-4%

Task Manager Component Performance Issues

React re-render optimization and component patterns

Criteria

Baseline

With context

TaskRow extracted

100%

Lazy state init for search index

Functional setState in handleToggle

100%

No items state sync effect

Submit logic in event handler

100%

No useMemo on simple primitives

REFACTOR_NOTES.md exists

100%

Consistent conditional rendering

50%

No inline component definitions remain

100%

Repository: CherryHQ/cherry-studio
Path: .agents/skills/vercel-react-best-practices/SKILL.md
Commit: 49c351a

Evaluated: 4 months ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Dashboard API Performance Overhaul Slow Initial Load Time Investigation Task Manager Component Performance Issues

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.