CtrlK
BlogDocsLog inGet started
Tessl Logo

react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. Use 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.

87

1.24x
Quality

88%

Does it follow best practices?

Impact

77%

1.24x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

SKILL.md
Quality
Evals
Security

Evaluation results

75%

7%

Developer Tools Dashboard

Bundle size optimization with dynamic imports

Criteria
Without context
With context

No barrel icon imports

0%

100%

Direct path icon imports OR optimizePackageImports

100%

100%

Dynamic import for heavy component

100%

100%

Heavy component has ssr:false

100%

100%

Analytics deferred

100%

100%

Analytics has ssr:false

100%

100%

Preload on hover or focus

0%

0%

SSR window guard in preload

0%

0%

Conditional module loading

100%

70%

Loading fallback provided

100%

100%

84%

28%

Social App Profile Page

Async waterfall elimination and RSC data fetching

Criteria
Without context
With context

Promise.all for independent fetches

100%

100%

Early promise start in API route

20%

20%

Parallel RSC composition

30%

100%

Synchronous page shell

0%

0%

React.cache() used

100%

100%

React.cache() with primitive args

100%

100%

after() for non-blocking side effects

16%

100%

Minimal RSC props

80%

100%

No sequential independent awaits

100%

100%

Suspense boundaries used

0%

100%

72%

8%

User Preferences Panel with Keyboard Shortcuts

Client-side state management and localStorage optimization

Criteria
Without context
With context

SWR for data fetching

0%

100%

localStorage version prefix

0%

0%

localStorage try-catch

100%

0%

Minimal localStorage fields

0%

0%

Functional setState in callbacks

100%

100%

No stale state in useCallback

100%

100%

toSorted() for immutable sort

0%

100%

Passive scroll/touch listeners

100%

100%

Deferred state reads in callbacks

100%

100%

Map or Set for lookups

100%

100%

Lazy state initialization

100%

100%

Repository
supercent-io/skills-template
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.