svelte
Wzorce Svelte 5 z TanStack Query i shadcn-svelte do szybszego pisania komponentów
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Umiejętność dla agentów AI zawierająca sprawdzone wzorce do pracy ze Svelte 5. Obejmuje mutacje TanStack Query z obsługą stanów ładowania i błędów, komponenty shadcn-svelte oraz najlepsze praktyki komponowania. Używaj jej podczas pisania komponentów Svelte, integracji TanStack Query lub budowania interfejsów z shadcn-svelte.
Jak używać
Zainstaluj umiejętność w swoim projekcie Svelte, dodając ją do konfiguracji agenta. Upewnij się, że masz zainstalowane zależności: @tanstack/svelte-query, shadcn-svelte oraz odpowiednie biblioteki UI.
Gdy piszesz komponent Svelte wymagający mutacji (np. usuwanie, aktualizacja danych), użyj wzorca createMutation z TanStack Query zamiast ręcznego zarządzania stanami. Umiejętność dostarczy Ci prawidłową strukturę importów i inicjalizacji.
W funkcji mutacji zawsze przekaż callbacki onSuccess i onError jako drugi argument do .mutate(). To pozwala Ci uzyskać dostęp do lokalnego stanu komponentu i obsługić powodzenie lub błąd z pełnym kontekstem.
Wewnątrz callbacku onSuccess obsługuj logikę po pomyślnym wykonaniu — zamykanie dialogów, wyświetlanie powiadomień, nawigację. W onError wyświetl komunikat błędu użytkownikowi z informacjami z odpowiedzi serwera.
Użyj właściwości isPending z obiektu mutacji do wyłączania przycisków i wyświetlania stanów ładowania. Umiejętność zapewnia automatyczne zarządzanie tymi stanami bez dodatkowego kodu.
Dla logiki w plikach TypeScript (.ts) zamiast Svelte, stosuj wzorzec .execute() zamiast createMutation, aby zachować spójność z architekturą projektu.