Menu
React and Next.js performance optimization guidelines from Vercel Engineering. Contains 45+ rules across 8 categories.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Create a pull request with a concise, useful description
Run validation checks - determines whether to use fast (validate) or full (validate:full) based on changed files
Security code review for vulnerabilities. Use when asked to "security review", "find vulnerabilities", "check for security issues", "audit security", "OWASP review", or review code for injection, XSS, authentication, authorization, cryptography issues. Provides systematic review with confidence-based reporting.
Create and manage isolated Docker workspaces on your tailnet with Claude Code and OpenCode pre-installed. Use when working with Perry workspaces, connecting to coding agents, or managing remote development environments.
Cut a new release - bump version, commit, tag, and push to trigger CI publish
| name | react-review |
| description | React and Next.js performance optimization guidelines from Vercel Engineering. Contains 45+ rules across 8 categories. |
Quick reference for reviewing React code. For detailed rules with code examples, see RULES.md.
| Priority | Category | Impact |
|---|---|---|
| 1 | Eliminating Waterfalls | CRITICAL |
| 2 | Bundle Size Optimization | CRITICAL |
| 3 | Server-Side Performance | HIGH |
| 4 | Client-Side Data Fetching | MEDIUM-HIGH |
| 5 | Re-render Optimization | MEDIUM |
| 6 | Rendering Performance | MEDIUM |
| 7 | JavaScript Performance | LOW-MEDIUM |
| 8 | Advanced Patterns | LOW |
async-parallel - Use Promise.all() for independent operationsasync-defer-await - Move await into branches where actually usedasync-suspense-boundaries - Use Suspense to stream contentbundle-barrel-imports - Import directly, avoid barrel filesbundle-dynamic-imports - Use next/dynamic for heavy componentsbundle-defer-third-party - Load analytics after hydrationrerender-memo - Extract expensive work into memoized componentsrerender-functional-setstate - Use functional setState for stable callbacksrerender-lazy-state-init - Pass function to useState for expensive valuesrendering-conditional-render - Use ternary, not && for conditionals with numbers