admin-crud-page

Skill do szybkiego tworzenia paneli administracyjnych w projektach Svelte. Zawiera gotowe komponenty do wyświetlania list danych w tabelach, edycji i tworzenia nowych wpisów, oraz filtrowania po statusie i typie. Struktura oparta na Remote Functions zapewnia czystą separację logiki serwerowej od interfejsu użytkownika. Idealne dla każdego, kto buduje sekcje administracyjne w aplikacjach Svelte.

1. Umieść skill w katalogu .claude/skills/ swojego projektu Svelte. Skill zawiera szablon struktury katalogów dla tras administracyjnych — skopiuj go do src/routes/(admin)/admin/[feature]/.

2. Utwórz plik +page.svelte dla strony listy, która będzie wyświetlać tabelę z danymi. Użyj komponentu AdminList jako wrapper i Table do renderowania wierszy. Komponenty znajdują się w $lib/ui/admin/.

3. Stwórz plik data.remote.ts w tym samym katalogu — tutaj umieść całą logikę serwerową, funkcje pobierania danych i mutacje. Skill wymaga używania Remote Functions zamiast +page.server.ts lub SvelteKit form actions.

4. Dla strony edycji utwórz [id]/+page.svelte, a dla tworzenia nowych wpisów opcjonalnie new/+page.svelte. Oba pliki powinny importować komponenty z $lib/ui/admin/, takie jak PageHeader do nagłówka strony.

5. Dodaj filtry do listy, jeśli potrzebujesz — skill zawiera komponenty StatusSelect i TypeSelect do filtrowania danych po statusie lub typie zawartości.

6. Pamiętaj, że wszystkie operacje danych (ładowanie, obsługa formularzy, zmiany) muszą przechodzić przez Remote Functions — nigdy nie używaj +page.server.ts ani +server.ts w tym projekcie.