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.

72

1.15x
Quality

58%

Does it follow best practices?

Impact

96%

1.15x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

Optimize this skill with Tessl

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

Evaluation results

100%

20%

User Profile API Route Optimization

Server-side caching and non-blocking operations

Criteria
Without context
With context

Font loaded at module level

100%

100%

Font awaited inside handler

100%

100%

React.cache used for getCurrentUser

100%

100%

getCurrentUser takes no object argument

100%

100%

getCurrentUser called multiple times

100%

100%

LRU cache used for getUser

100%

100%

LRU cache max and ttl set

100%

100%

LRU cache miss checks and sets

100%

100%

after() used for audit logging

0%

100%

Response returned before after() work

0%

100%

No module-level mutable request state

100%

100%

LRU and React.cache imports correct

100%

100%

90%

20%

Dashboard Data Loader Refactor

Async parallelism with partial dependencies and analyzable imports

Criteria
Without context
With context

better-all imported

100%

100%

all() used for loadDashboardData

66%

100%

Config starts immediately

100%

100%

Team depends on user via this.$

0%

50%

Activity depends on user via this.$

0%

50%

PAGE_MODULES values are import functions

50%

100%

No dynamic path construction

100%

100%

loadPage invokes the import function

100%

100%

All four data fields returned

100%

100%

Valid TypeScript

100%

100%

100%

Client-Side Hooks Library

Client-side hooks: localStorage versioning, deduped listeners, module-level caching

Criteria
Without context
With context

localStorage key is versioned

100%

100%

Minimal fields stored

100%

100%

localStorage wrapped in try-catch

100%

100%

Lazy useState initialization

100%

100%

useSWRSubscription used for online status

100%

100%

Single listener key used

100%

100%

Online/offline events subscribed

100%

100%

Module-level Map cache for formatSlug

100%

100%

Cache is a Map, not a hook

100%

100%

Cache check before computation

100%

100%

useFormatSlug calls formatSlug

100%

100%

swr/subscription imported

100%

100%

Repository
vercel-labs/agent-skills
Evaluated
Agent
Claude Code
Model
Claude Sonnet 4.6

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.