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.

Install with Tessl CLI

npx tessl i github:tibelf/ai_project_init --skill vercel-react-best-practices

What are skills?

Review — 77%

Does it follow best practices?

If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:

npx tessl skill review --optimize ./path/to/skill

Learn more

Validation — 11 / 11 Passed

Validation for skill structure

SKILL.md

Review

Evals

Evaluation results

83%

-1%

Admin Dashboard Performance Overhaul

Bundle optimization and async waterfall elimination

Criteria

Without context

With context

Direct imports used

100%

Dynamic import for heavy components

100%

Analytics deferred post-hydration

100%

Conditional module loading

100%

Promise.all for parallel fetches

100%

Promises started early

100%

Suspense boundaries present

100%

Await deferred to usage site

44%

77%

Hover/focus preload present

No unnecessary top-level awaits

66%

77%

SSR disabled where appropriate

100%

37%

Without context: $0.4523 · 1m 51s · 23 turns · 30 in / 6,511 out tokens

With context: $0.8012 · 3m 8s · 34 turns · 298 in / 11,466 out tokens

60%

13%

Product Catalog with Shared Data and Interactive Filtering

Server-side caching and re-render optimization

Criteria

Without context

With context

React.cache() used

100%

LRU cache for cross-request

Server data serialization minimized

75%

87%

Parallel server fetches

100%

after() for side effects

100%

Memoized expensive component

100%

Functional setState used

50%

100%

Lazy state initialization

Primitive useEffect dependencies

50%

startTransition for filter/search

37%

100%

Derived state subscription

28%

SWR for client dedup

Without context: $0.6255 · 3m · 22 turns · 27 in / 11,328 out tokens

With context: $0.6705 · 2m 22s · 32 turns · 69 in / 8,548 out tokens

55%

14%

Transaction History Dashboard with Animated Status Indicators

Rendering performance and JavaScript optimization

Criteria

Without context

With context

SVG animated via wrapper div

55%

100%

content-visibility applied

Static JSX hoisted

Ternary for conditional render

62%

37%

Map/Set for O(1) lookups

22%

Index Map built once

Combined filter/map iterations

100%

RegExp hoisted outside loop

50%

toSorted() for immutable sort

50%

Early returns present

100%

Hydration flicker prevention

77%

100%

Loop-based min/max

100%

Without context: $0.5636 · 2m 11s · 26 turns · 31 in / 8,828 out tokens

With context: $0.6914 · 2m 51s · 26 turns · 30 in / 11,039 out tokens

Evaluated: 1 day ago
Agent: Claude Code

Table of Contents

Admin Dashboard Performance Overhaul Product Catalog with Shared Data and Interactive Filtering Transaction History Dashboard with Animated Status Indicators

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.