frontend-dev-guidelines
Wytyczne do nowoczesnego React – Suspense, TypeScript, MUI i optymalizacja wydajności
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill zawierający kompletne wytyczne do tworzenia aplikacji frontendowych w React i TypeScript. Obejmuje nowoczesne wzorce: Suspense do obsługi stanów ładowania, lazy loading komponentów, useSuspenseQuery do pobierania danych, organizację kodu w strukturze features, stylowanie z MUI v7, routing za pomocą TanStack Router oraz best practices TypeScript. Używaj przy tworzeniu komponentów, stron, nowych funkcjonalności, integracji danych i optymalizacji wydajności.
Jak używać
Zainstaluj skill w swoim projekcie Claude/Copilot, wskazując ścieżkę do repozytorium diet103. Skill będzie dostępny jako referencja podczas pracy nad kodem frontendowym.
Gdy tworzysz nowy komponent, skonsultuj się ze skill'm w celu weryfikacji struktury. Upewnij się, że używasz wzorca React.FC
z TypeScript, dodajesz lazy loading dla ciężkich komponentów oraz owijasz je w Suspense do obsługi stanów ładowania. Przy pobieraniu danych stosuj useSuspenseQuery zamiast tradycyjnych hooków. Skill przypomni Ci o prawidłowej organizacji kodu – import aliases (@/, ~types, ~components, ~features), obsłudze błędów i notyfikacjach za pomocą useMuiSnackbar.
Tworząc nową funkcjonalność, utwórz katalog features/{nazwa-funkcji}/ z podkatalogami: api/, components/, hooks/, helpers/, types/. Skill zawiera pełną listę kontrolną struktury katalogów i plików.
Przy stylowaniu komponentów stosuj reguły: style inline dla kodu poniżej 100 linii, osobne pliki dla większych stylów. Używaj MUI v7 i TanStack Router do routingu zgodnie z wytycznymi skill'm.
Regularnie weryfikuj swój kod względem best practices TypeScript i optymalizacji wydajności opisanych w skill'm – zwłaszcza useCallback dla handlersów przekazywanych do komponentów potomnych i unikanie wczesnych returnów ze spinnersami ładowania.