frontend-dev-guidelines

Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.

1. 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.

2. 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.

3. 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.

4. 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.

5. 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.

6. 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.