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

Quality

82%

Does it follow best practices?

Impact

92%

1.22x

Average score across 3 eval scenarios

Securityby

Passed

No findings from the security scan

Evaluation results

78%

18%

Code Editor Feature for Internal Dev Portal

Bundle size optimization

Criteria

Baseline

With context

Direct icon imports

100%

Dynamic import for MonacoEditor

50%

100%

Monaco ssr disabled

100%

Analytics dynamic import

100%

Analytics ssr disabled

100%

Preload on hover or focus

Preload uses window guard

CHANGES.md explains barrel imports

100%

CHANGES.md explains dynamic imports

100%

14%

Dashboard API Route Performance Overhaul

Async waterfall elimination

Criteria

Baseline

With context

Early promise start in API route

100%

Promise.all for independent operations

100%

Deferred await in skipReport branch

100%

Parallel fetch in utility

100%

Suspense boundary in page

100%

Page shell renders immediately

100%

Suspense fallback provided

100%

CHANGES.md explains parallelism

100%

CHANGES.md explains Suspense streaming

100%

20%

User Profile Service with Caching and Secure Mutations

Server-side caching and secure server actions

Criteria

Baseline

With context

React.cache() used

100%

LRUCache imported from lru-cache

100%

LRU cache configured with max and ttl

100%

Auth check inside server action

100%

Authorization check inside server action

100%

use server directive present

100%

No duplicate RSC props

100%

Static file read hoisted to module level

100%

IMPLEMENTATION.md covers caching strategy

100%

IMPLEMENTATION.md covers security

100%

Repository: MODSetter/SurfSense
Path: .cursor/skills/vercel-react-best-practices/SKILL.md
Commit: 3b319ce

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

Table of Contents

Dashboard API Route Performance Overhaul Code Editor Feature for Internal Dev Portal User Profile Service with Caching and Secure Mutations

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.