skills.rest
carloitaben
carloitabenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Optimize React and Next.js apps with这套 Vercel-inspired workflows and checklists for improved LLM-driven code generation and UI consistency.

Updated Jul 2, 2024
Search Tags:#code quality#performance#web development#react#optimization#next.js
One-click install
npx skills add https://github.com/carloitaben/dotfiles --skill vercel-react-best-practices-carloitaben
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/carloitaben/dotfiles/tree/main/.config/opencode/skills/vercel-react-best-practices
Command: npx skills add https://github.com/carloitaben/dotfiles --skill vercel-react-best-practices-carloitaben

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of rules and best practices to optimize the performance of React and Next.js applications, addressing critical areas like waterfalls, bundle size, and rendering efficiency.

Core Features & Use Cases

  • Performance Optimization: Offers 45+ rules across 8 categories, prioritized by impact, to guide developers in writing performant React/Next.js code.
  • Code Refactoring: Provides specific examples for eliminating waterfalls, reducing bundle size, and improving server-side and client-side data fetching.
  • Use Case: A developer is building a new Next.js e-commerce site and wants to ensure it loads quickly and remains responsive. They consult this Skill to implement best practices for data fetching, code splitting, and rendering.

Quick Start

Apply the vercel-react-best-practices skill to refactor the provided React component for optimal performance.

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 application performance?▼

React and Next.js performance optimization involves eliminating data waterfalls, reducing bundle size, and improving rendering efficiency. This skill provides 45+ rules across 8 categories with code examples and impact metrics for automated refactoring.

What is the best way to eliminate data waterfalls in Next.js?▼

Eliminating data waterfalls in Next.js requires optimizing server-side and client-side data fetching patterns. This skill provides specific examples and rules to refactor fetching logic and improve loading responsiveness.

How do I reduce bundle size in a React application?▼

Reducing bundle size in a React application requires applying code splitting and optimization rules. This skill offers prioritized best practices with code examples to minimize JavaScript payload and improve load times.

Can I use these React optimization rules for an e-commerce site?▼

These React optimization rules can be used for an e-commerce site to ensure fast loading and responsiveness. The skill guides developers in implementing best practices for data fetching, code splitting, and rendering performance.

Why does my React application have poor rendering performance?▼

Poor React rendering performance often stems from inefficient re-renders and unoptimized JavaScript execution. This skill addresses these issues with advanced patterns and rules prioritized by impact to refactor components.

Related Skills

Explore More Software Engineering Skills→
adriannoesadriannoes
46

react-best-practices

Provide best practices for optimizing React and Next.js performance and code quality.

Community
Advanced
BEIRUXBEIRUX

vercel-react-best-practices

Optimize React and Next.js data fetching and bundle size in code reviews.

Official
Advanced
Itinerant18Itinerant18

web-performance-optimization

Analyze Core Web Vitals and optimize frontend loading performance.

Community
Advanced
xrehpicxxrehpicx
2

vercel-react-best-practices

Optimize React and Next.js applications with performance guidelines for code splitting and lazy loading.

Community
Advanced