page-builder
Gotowe wzorce do budowania stron z listami, formularzami i filtrami
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Zestaw uniwersalnych wzorców do tworzenia stron listy i szczegółów. Umożliwia szybkie budowanie stron z filtrowaniem, wyszukiwaniem, paginacją i formularzami edycji. Opiera się na zasadzie Remote-First — logika pobierania i przetwarzania danych pozostaje w pliku data.remote.ts, a komponenty Svelte pełnią rolę czystych renderów. Idealne do publicznych i administracyjnych interfejsów, które wymagają dynamicznego wyświetlania danych z mapowaniem typów na komponenty.
Jak używać
Zainstaluj skill w swoim projekcie Svelte, umieszczając pliki wzorców w katalogu .claude/skills/page-builder.
Przeanalizuj strukturę tras: utwórz folder [section] w src/routes z plikami +page.svelte dla strony listy, data.remote.ts dla funkcji zdalnych oraz podfolder [slug] z +page.svelte dla strony szczegółów.
Zaimplementuj logikę pobierania danych w pliku data.remote.ts — umieść tam zapytania do bazy danych, funkcje filtrowania i obsługę formularzy, aby oddzielić logikę od renderowania.
Stwórz mapę komponentów w pliku +page.svelte strony listy, przypisując typy danych do odpowiednich komponentów (np. 'article' → ArticleCard, 'video' → VideoCard), a następnie renderuj elementy za pomocą pętli #each z dynamicznym wyborem komponentu.
Dodaj formularze filtrów, które automatycznie wysyłają dane po zmianach — użyj debounce'a (opóźnienia) na zdarzeniach input, aby uniknąć zbyt częstych żądań do serwera.
Dla stron szczegółów zastosuj ten sam wzorzec: pobieraj dane w data.remote.ts, renderuj formularz edycji w +page.svelte i obsługuj wysyłanie zmian poprzez zdalne funkcje.