Toolverse
All skills

sveltekit-structure

by spences10

SvelteKit structure guidance. Use for routing, layouts, error handling, and SSR. Covers file naming (+page vs +layout vs +server), nested layouts, error boundaries, and hydration.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
spences10
Category
Frontend
Views
79

About this skill

SvelteKit structure guidance. Use for routing, layouts, error handling, and SSR. Covers file naming (+page vs +layout vs +server), nested layouts, error boundaries, and hydration.

How to use

  1. Zainstaluj umiejętność w swoim projekcie Claude'a, dodając plik sveltekit-structure do katalogu .claude/skills.

  2. Kiedy pracujesz nad projektem SvelteKit i potrzebujesz wyjaśnienia dotyczącego organizacji plików, poproś Claude'a o wskazówki — na przykład: "Jak powinien wyglądać routing dla strony /posts/[id]?" lub "Gdzie umieścić +error.svelte?"

  3. Zapoznaj się z podstawowymi typami plików: +page.svelte (strona), +layout.svelte (wrapper dla tras potomnych), +error.svelte (granica błędu) i +server.ts (endpoint API).

  4. Stosuj layouty na dowolnym poziomie folderu — każdy +layout.svelte automatycznie opakowuje wszystkie trasy potomne. Zagnieżdżone layouty dziedziczą strukturę z poziomów wyższych.

  5. Dla obsługi błędów umieść +error.svelte powyżej trasy, która może zawieść. Dla dynamicznych stanów (ładowanie, błędy) na poziomie komponentu użyj svelte:boundary.

  6. Jeśli potrzebujesz kodu tylko po stronie serwera lub tylko w przeglądarce, sprawdź zmienną browser i skonfiguruj SSR zgodnie z wymaganiami projektu.

Related skills