skills.rest
tillysoso
tillysosoCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply 70 prioritized best-practice rules to React and Next.js development.

Updated Sep 10, 2025
Search Tags:#performance#react#nextjs#best-practices#code-review#web-performance#bundle-size
One-click install
npx skills add https://github.com/tillysoso/mv1 --skill vercel-react-best-practices-tillysoso
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/tillysoso/mv1/tree/main/.claude/skills/vercel-react-best-practices
Command: npx skills add https://github.com/tillysoso/mv1 --skill vercel-react-best-practices-tillysoso

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This collection of guidelines helps React and Next.js teams optimize performance and maintainability by providing a centralized, prioritized set of best practices for development, review, and refactoring.

Core Features & Use Cases

  • Comprehensive guidelines with 70 rules across 8 categories to standardize performance improvements.
  • Prioritized reference with consistent structure and clear application scenarios for React components, Next.js pages, and data fetching.
  • Use Cases: writing new components/pages, reviewing code for performance issues, refactoring to optimize bundle size and load times, and enforcing consistent performance patterns across projects.

Quick Start

Apply the priority-driven rules to a React/Next.js project by consulting the top categories and implementing the guidance in your components and data-fetching paths.

Frequently Asked Questions about vercel-react-best-practices

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

FAQPage Schema
What are the best practices for optimizing React component performance?▼

React performance best practices are standardized through 70 prioritized rules across 8 categories, guiding component development, page data fetching, and refactoring to improve bundle size and load times.

How do I review code for Next.js performance issues?▼

Review Next.js code for performance issues by consulting the priority-driven best-practice rules during code reviews to identify optimization opportunities in components and data-fetching paths.

Can I use these React best practices for refactoring existing projects?▼

Yes, you can use these React best practices for refactoring existing projects by applying the structured guidelines to optimize bundle size, improve load times, and enforce consistent performance patterns.

What is the best way to reduce bundle size in a Next.js application?▼

The best way to reduce Next.js bundle size is to apply the priority-driven best-practice rules during component development and refactoring, targeting specific performance optimizations across 8 distinct categories.

Do I need specific dependencies to implement these Next.js performance guidelines?▼

No specific external dependencies are required to implement these Next.js performance guidelines; they provide a centralized reference of rules and examples to apply directly within your existing React and Next.js codebase.

Related Skills

Explore More Software Engineering Skills→
qianleigoodqianleigood
30

vercel-react-best-practices

Audit React/Next.js apps for performance bottlenecks using Vercel best-practice rules.

Community
Advanced
etylsarinetylsarin
59

performance-optimization

Analyze profiling data and bundle metrics to recommend performance fixes.

Community
Intermediate
mlbrightmlbright

code-review

Analyzes Rails code quality and security via automated tools.

Community
Intermediate
terrylicaterrylica
62

multi-agent-performance-profiling

Profile data pipeline stages to identify performance bottlenecks and prioritize optimizations.

Community
Advanced