Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →guanyang/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.
Passed 22 of 24 test cases with the skill, and 19 of 24 without it.
and 2 more in the full report
4 fixed18 passed either way1 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 4 test cases the skill fixed. Same model, same prompt, with and without the skill.
Please inspect my React dashboard component where updating an input field lags the whole UI. Provide a refactored version of the file that resolves wasteful re-renders, optimizes inline array processing, and extracts heavy nested logic cleanly.
| Checked | Without skill | With skill |
|---|---|---|
| Uses a ternary conditional expression instead of the logical AND operator for conditional JSX rendering | Missed | Passed |
| Uses functional state updates or deferred values to eliminate re-rendering delays during text input updates | Missed | Passed |
The instructions your model reads when the skill loads.
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 70 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Eliminating Waterfalls | CRITICAL | async- |
| 2 | Bundle Size Optimization | CRITICAL | bundle- |
| 3 | Server-Side Performance | HIGH | server- |
| 4 | Client-Side Data Fetching | MEDIUM-HIGH | client- |
| 5 | Re-render Optimization | MEDIUM | rerender- |
| 6 | Rendering Performance | MEDIUM | rendering- |
| 7 | JavaScript Performance | LOW-MEDIUM | js- |
| 8 | Advanced Patterns | LOW | advanced- |
async-cheap-condition-before-await - Check cheap sync conditions before awaiting flags or remote valuesasync-defer-await - Move await into branches where actually usedasync-parallel - Use Promise.all() for independent operationsasync-dependencies - Use better-all for partial dependenciesasync-api-routes - Start promises early, await late in API routesasync-suspense-boundaries - Use Suspense to stream contentbundle-barrel-imports - Import directly, avoid barrel filestest cases passed, vs 19 / 24 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.