react-perf
Optymalizuj wydajność React i Next.js — eliminuj wąskie gardła, zmniejszaj bundle, zapobiegaj niepotrzebnym renderowaniom.
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Umiejętność zawierająca sprawdzone wzorce optymalizacji wydajności dla kodu React. Zastosuj ją podczas pisania, przeglądu lub optymalizacji aplikacji webowych, filmów Remotion lub dowolnego interfejsu opartego na React. Obejmuje eliminację sekwencyjnych zapytań, optymalizację rozmiaru pakietu, zapobieganie ponownym renderowaniom oraz wzorce serwerowe. Skupia się na czterech obszarach: usuwanie waterfalli (sekwencyjnych oczekiwań), zmniejszanie rozmiaru bundle'a poprzez bezpośrednie importy, minimalizacja niepotrzebnych renderowań za pomocą ref i memo, oraz optymalizacja operacji JavaScript.
Jak używać
Zainstaluj umiejętność w swoim środowisku agenta — dodaj react-perf do listy dostępnych skills w konfiguracji MCP.
Kiedy piszesz lub przeglądasz kod React, poproś agenta o analizę wydajności, wskazując konkretny fragment kodu lub plik. Agent zastosuje wzorce z umiejętności, aby zidentyfikować problemy.
Zwróć uwagę na cztery priorytety: najpierw usuń waterfalle (sekwencyjne await) zamieniając je na Promise.all dla niezależnych żądań, następnie zoptymalizuj bundle poprzez bezpośrednie importy zamiast barrel imports, potem zapobiegaj renderowaniom używając useRef zamiast useState gdzie to możliwe, wreszcie popraw wydajność JavaScript poprzez Map/Set zamiast pętli.
W aplikacjach Next.js wykorzystaj React.cache() do deduplikacji żądań w ramach jednego renderowania oraz minimalizuj dane przesyłane do klienta — agent pokaże, gdzie można przenieść logikę na serwer.
Dla komponentów Remotion zastosuj te same zasady: cachuj wyniki interpolate() jeśli są drogie, używaj useMemo dla ciężkich obliczeń, minimalizuj renderowanie elementów poza ekranem.
Poproś agenta o konkretne sugestie refaktoringu — będzie proponować zmiany kodu z wyjaśnieniami, dlaczego każda optymalizacja poprawia wydajność.