Vercel React Best Practices
A collection of 45 React and Next.js performance rules organized by actual impact, starting with critical waterfall elimination and bundle size, then working down to rendering optimizations and advanced patterns. Each rule includes wrong and right code examples, which makes it more useful for code review or refactoring than vague performance advice. The consistent prefixes (async-, bundle-, server-, client-) make it easy to reference specific rules when you're debugging a slow page load or reviewing a PR. It's maintained by Vercel, so the Next.js guidance reflects how the framework actually works. Worth having loaded when you're optimizing an existing app or setting up patterns for a new one.
- skills.sh installs
- 612
- GitHub stars
- 160.8K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add langgenius/dify --skill vercel-react-best-practices --agent claude-codeInstalls into .claude/skills of the current project.
Files
A collection of 45 React and Next.js performance rules organized by actual impact, starting with critical waterfall elimination and bundle size, then working down to rendering optimizations and advanced patterns. Each rule includes wrong and right code examples, which makes it more useful for code review or refactoring than vague performance advice. The consistent prefixes (async-, bundle-, server-, client-) make it easy to reference specific rules when you're debugging a slow page load or reviewing a PR. It's maintained by Vercel, so the Next.js guidance reflects how the framework actually works. Worth having loaded when you're optimizing an existing app or setting up patterns for a new one.
Browse the repository on GitHubSponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/langgenius/dify
- Categories
- Frontend Development, Documentation, Code Review & Quality, Debugging, Cloud & Infrastructure
- First seen
- May 16, 2026
More from langgenius/dify
All 8Recommended
More Frontend Development
frontend-accessibilityaj-geddes/useful-ai-promptsImplement WCAG compliance using semantic HTML, ARIA, keyboard navigation, and screen reader support. Use when building inclusive applications for all users.604skills.sh installs
svelte-componentsspences10/svelte-skills-kitSvelte component patterns. Use for web components, component libraries (Bits UI, Ark UI, Melt UI), form patterns, or third-party integration.566skills.sh installs
tailwind-patternsdavila7/claude-code-templatesTailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.564skills.sh installsreact-best-practicesdavila7/claude-code-templatesComprehensive React and Next.js performance optimization guide with 40+ rules for eliminating waterfalls, optimizing bundles, and improving rendering. Use when 550skills.sh installs
ios-glass-ui-designerheyman333/atelier-uiRedesign mobile app UI to feel unmistakably iOS-native with modern Apple-like glass materials (translucency, blur, depth). Use this skill when designing iOS-fir511skills.sh installs
react-composition-patternssecondsky/claude-skillsReact composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reus494skills.sh installs