vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

1. Zainstaluj umiejętność w swoim środowisku agenta Claude lub Copilota, dodając ją do konfiguracji dostępnych skills. Umiejętność automatycznie aktywuje się, gdy pracujesz nad kodem React lub Next.js.

2. Kiedy piszesz nowy komponent React lub stronę Next.js, agent będzie sugerować zastosowanie odpowiednich reguł z 8 kategorii priorytetowych. Zacznij od kategorii CRITICAL (Eliminating Waterfalls i Bundle Size Optimization), które mają największy wpływ na wydajność.

3. Podczas implementacji pobierania danych (client-side lub server-side) skonsultuj się z regułami kategorii "Client-Side Data Fetching" i "Server-Side Performance". Reguły takie jak async-parallel pomagają uniknąć sekwencyjnych operacji asynchronicznych.

4. Przy przeglądzie istniejącego kodu szukaj problemów związanych z re-renderowaniem, optymalizacją pakietu i wydajnością JavaScript. Każda reguła ma prefiks (np. async-, bundle-, rerender-), który ułatwia identyfikację kategorii.

5. Podczas refaktoryzacji kodu lub optymalizacji czasu ładowania strony, użyj reguł w kolejności priorytetów: najpierw CRITICAL, potem HIGH, następnie MEDIUM. To zapewnia maksymalny wpływ na wydajność aplikacji.

6. Jeśli pracujesz nad zaawansowanymi wzorcami lub specjalistycznymi przypadkami, sprawdź kategorię "Advanced Patterns" (prefiks advanced-). Te reguły mają niższy priorytet, ale mogą być istotne dla specyficznych scenariuszy optymalizacji.