vercel-react-best-practices

Umiejętność zawierająca 45 reguł optymalizacji wydajności dla aplikacji React i Next.js, opracowanych przez inżynierów Vercela. Pomaga pisać, przeglądać i refaktoryzować kod, eliminując wąskie gardła wydajności, optymalizując rozmiar pakietu i poprawiając czasy ładowania. Aktywuje się automatycznie przy pracach nad komponentami React, stronami Next.js, pobieraniem danych oraz optymalizacją wydajności. Reguły podzielone na 8 kategorii, od krytycznych (eliminacja waterfalli, optymalizacja pakietu) po zaawansowane wzorce.

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.