vercel-react-best-practices

To optimize React and Next.js performance, apply curated best-practice patterns for rendering, data fetching, and bundling. The skill generates automated refactors and code-generation prompts that enforce safe, non-destructive improvements to reduce avoidable runtime bottlenecks.

Next.js data fetching and SSR optimization best practices involve standardizing high-impact performance patterns. The skill provides actionable guidance and enforceable rules for data-fetching strategies, ensuring reliable and fast server-side rendering without avoidable bottlenecks.

Yes, you can use automated code generation to safely refactor React component rendering. The skill enforces non-destructive patterns with built-in guardrails for safety and validation, ensuring automated refactoring generates consistent, high-quality implementations without breaking existing logic.

Yes, this approach works for bundle optimization in typical modern React apps. The skill's scope explicitly includes bundle optimization, applying enforceable rules and AI-assisted workflows to surface recommended changes that improve overall bundle size and runtime performance.

The limitation of non-destructive patterns is that changes are strictly scoped to avoid breaking existing functionality. While this ensures safe refactoring and validation, it may require manual review for highly custom or legacy code structures that fall outside typical modern React app patterns.