vercel-react-best-practices

What problem does it solve? React and Next.js codebases often ship with hidden performance problems: sequential async waterfalls, bloated bundles from barrel imports, unnecessary re-renders, and duplicated server-side work. This Skill gives an agent a prioritized, rule-based checklist from Vercel Engineering so performance issues are caught and fixed during code generation and review rather than after production incidents. ## Core Features & Use Cases - 70 prioritized rules across 8 categories: from CRITICAL (eliminating waterfalls, bundle size) down to LOW (advanced hook patterns), each with incorrect vs. correct code examples and impact metrics. - Structured rule files: individual Markdown rules under rules/ with frontmatter (title, impact, tags), plus a compiled AGENTS.md containing the full guide. - Use Case: While refactoring a Next.js page, the agent applies async-parallel to convert sequential fetches into Promise.all(), replaces barrel imports from lucide-react per bundle-barrel-imports, and wraps slow sections in Suspense boundaries per async-suspense-boundaries. ## Quick Start Review my Next.js page component using the vercel-react-best-practices rules and fix any waterfalls, bundle, or re-render issues you find.