skills.rest
bostonaholic
bostonaholicCOMMUNITY
Explore all skills by this author →
Website𝕏@bostonaholicGitHub

vercel-react-best-practices

Review React components and Next.js pages against prioritized performance rules.

12|1|Updated Jun 4, 2013
Search Tags:#performance#react#optimization#next.js#code-review#web-vitals#bundle-size
One-click install
npx skills add https://github.com/bostonaholic/dotfiles --skill vercel-react-best-practices-bostonaholic
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/bostonaholic/dotfiles/tree/main/claude/skills/vercel-react-best-practices
Command: npx skills add https://github.com/bostonaholic/dotfiles --skill vercel-react-best-practices-bostonaholic

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This collection provides a structured, engineer-friendly framework for applying proven performance patterns to React and Next.js projects, reducing bottlenecks and improving user-perceived performance across platforms.

Core Features & Use Cases

  • Comprehensive rule taxonomy with prioritized categories to guide code reviews, refactors, and performance-driven architecture decisions.
  • Quick references and playbooks for common bottlenecks in rendering, data fetching, and bundle optimization.
  • Scenarios spanning client-side and server-side rendering, page loads, and component design to keep performance top of mind during development.

Quick Start

Review your React components and Next.js pages to identify performance bottlenecks and apply the recommended patterns.

Frequently Asked Questions about vercel-react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize React and Next.js performance during code reviews?▼

You can optimize React and Next.js performance during code reviews by applying a structured rule taxonomy with prioritized categories and actionable guidelines targeting rendering, data fetching, and bundle size bottlenecks.

What are the best practices for reducing bundle size in Next.js applications?▼

Best practices for reducing bundle size in Next.js involve applying structured optimization rules that target component design and page load scenarios, providing quick references to identify and eliminate rendering and data fetching bottlenecks.

Does this performance optimization framework support both client-side and server-side rendering scenarios?▼

Yes, the performance optimization framework supports both client-side and server-side rendering scenarios, providing structured playbooks to guide architectural decisions and improve user-perceived performance across platforms.

How do I structure data fetching strategies to improve web vitals in Next.js?▼

Structure data fetching strategies to improve web vitals by using the provided performance playbooks, which categorize rendering and data fetching rules by priority to guide refactors and architecture decisions for faster page loads.

What's the best way to identify React component performance bottlenecks?▼

The best way to identify React component performance bottlenecks is reviewing components against a comprehensive rule taxonomy that prioritizes categories like rendering, data fetching, and bundle optimization to pinpoint and resolve bottlenecks.

Related Skills

Explore More Software Engineering Skills→
eco2-teameco2-team
2

vercel-react-best-practices

Generate prioritized React/Next.js performance optimization plans from official best practices.

Official
Advanced
rahlplxrahlplx

astro-performance-expert

Apply engineering rules to improve Astro site performance and Core Web Vitals.

Community
Advanced
Colten-CovingtonColten-Covington

performance-profiling

Profiles React component rendering and bundle sizes to resolve web performance bottlenecks.

Community
Advanced
zapabobzapabob
2

ts-reviewer

Review TypeScript and JavaScript code for type safety and best practices.

Community
Advanced