Vercel React Best Practices

davila7/claude-code-templates

This is Vercel's official collection of 45 React and Next.js performance rules organized into 8 categories by impact level. It's designed to guide AI coding agents through optimization decisions when writing components, implementing data fetching, or refactoring existing code. The rules are specific enough to drive automated refactoring rather than just being general advice. You'd pull this in when working on any React or Next.js project where performance matters, especially if you want your AI assistant to make opinionated choices about bundle size, rendering strategies, and load time optimization without you needing to specify every detail. It's maintained by the same team that builds Next.js, so the recommendations track with current framework best practices.

skills.sh installs

376

GitHub stars

33.2K

last updated

Aug 21, 2026

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Recommended

More Frontend Development

1vercel-react-best-practicespedronauck/skillsReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js c360skills.sh installs

2responsive-imagesjezweb/claude-skillsImplement performant responsive images with srcset, sizes, lazy loading, and modern formats (WebP, AVIF). Covers aspect-ratio for CLS prevention, picture elemen358skills.sh installs

3bun-nextjssecondsky/claude-skillsThis skill should be used when the user asks about "Next.js with Bun", "Bun and Next", "running Next.js on Bun", "Next.js development with Bun", "create-next-ap358skills.sh installs

4angular-performancegentleman-programming/gentleman-skillsAngular performance: NgOptimizedImage, @defer, lazy loading, SSR. Trigger: When optimizing Angular app performance, images, or lazy loading.353skills.sh installs

5frontend-js-best-practicessergiodxa/agent-skillsJavaScript performance optimization guidelines. Use when writing, reviewing, or refactoring JavaScript/TypeScript code to ensure optimal performance patterns. T336skills.sh installs

6nextjs-advanced-routingwsimmonds/claude-nextjs-skillsGuide for advanced Next.js App Router patterns including Route Handlers, Parallel Routes, Intercepting Routes, Server Actions, error boundaries, draft mode, and336skills.sh installs