React Best Practices
This is Vercel's measurement-first approach to React and Next.js performance work. It triages problems into six buckets (waterfalls, bundle weight, RSC boundaries, rerenders, hydration, measurement gaps) before suggesting fixes, so you're not cargo-culting memoization when the real issue is a 200ms barrel import or three sequential fetches that should run in parallel. The 45-rule catalog covers everything from Promise.all patterns to content-visibility for long lists, but the workflow pushes you to profile first and route non-React bottlenecks to adjacent skills. If you're refactoring a slow App Router page or debugging why a client component ships 800kb of Lucide icons, this gives you the checklist and priority order.
- skills.sh installs
- 172
- GitHub stars
- 22
- last updated
- Jun 3, 2026
Install
$ npx -y skills add akillness/oh-my-skills --skill react-best-practices --agent claude-codeInstalls into .claude/skills of the current project.
Files
Vercel React Best Practices
Measurement-led React and Next.js performance skill for routing slow-page work into the right packet before refactoring. The canonical focus is waterfalls, bundle weight, RSC or client-boundary mistakes, hydration/script cost, and rerender churn; the deep AGENTS.md remains available, but day-to-day use should start from the lighter reference bundle and route-outs.
When to use this skill
Reference these guidelines when:
- Writing new React components or Next.js pages
- Implementing data fetching (client or server-side)
- Reviewing code for performance issues
- Refactoring existing React/Next.js code
- Optimizing bundle size or load times
Rule Categories by Priority
Sponsors
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/akillness/oh-my-skills
- Category
- Frontend Development
- First seen
- Jun 3, 2026
More from akillness/oh-my-skills
All 81- Agentation171
- Bmad Idea171
- Code Review171
- Marketing Automation171
- Obsidian Plugin171
- Opencontext171
- Standup Meeting171
- Task Estimation171
- Ui Component Patterns171
- Changelog Maintenance170
- Monitoring Observability170
- Sprint Retrospective170
- Deployment Automation169
- Ohmg169
- Security Best Practices169
- Authentication Setup168
- Fabric168
- Firebase Ai Logic168
- Debugging167
- Environment Setup167
- Git Submodule167
- Git Workflow167
- Marketing Skills Collection167
- Pattern Detection167
Recommended
More Frontend Development
developing-preactoaustegard/claude-skillsSpecialized Preact development skill for standards-based web applications with native-first architecture and minimal dependency footprint. Use when building Pre167skills.sh installs
sn-md-to-html-reportopensensenova/sensenova-skills将 Markdown 文档转换为美观、舒适、结构清晰、可直接打开的 HTML 长篇报告。适用于把 .md 文件转成 HTML、统一研究报告/行业报告/调研文档版式、生成可离线分享的单文件网页报告、嵌入或校验本地图片、修复 Markdown 表格分隔符导致的错列问题，或优化已有 HTML 报告的阅读留白、图片呈现、目录导161skills.sh installs