Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →cloudai-x/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 25 of 25 test cases with the skill, and 23 of 25 without it.
2 fixed23 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
Our React e-commerce checkout modal imports several heavy charting and UI libraries, causing noticeable lag and bloated bundle size when users open it. Can you review the component code provided below, rewrite it using modern React optimization strategies to reduce bundle overhead and unnecessary re-renders, and present the final updated code along with key refactoring summary notes?
| Checked | Without skill | With skill |
|---|---|---|
| The response uses ternary operators instead of logical AND for conditional rendering. | Missed | Passed |
| The response uses dynamic imports to defer loading heavy dependencies. | Passed | Passed |
The instructions your model reads when the skill loads.
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 47 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-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 routestest cases passed, vs 23 / 25 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.