svelte-components

Skill zawierający best practices do budowania komponentów w Svelte 5 dla aplikacji Exceptionless. Nauczysz się pracować z runami ($state, $derived, $effect), obsługiwać props i eventy, organizować komponenty oraz integrować bibliotekę shadcn-svelte. Dokumentacja obejmuje reaktywność, snippety, renderowanie warunkowe i strukturę katalogów zgodną z architekturą feature-slice.

1. Zapoznaj się z dokumentacją Svelte 5 na svelte.dev i użyj kontekstu context7 jako referencji API dla rун i reaktywności. 2. Organizuj komponenty w strukturze katalogów src/lib/features/, gdzie każdy feature ma własny folder components/ z plikami w konwencji kebab-case (np. organization-card.svelte). 3. Zawsze importuj komponenty UI z biblioteki shadcn-svelte zamiast używać natywnych elementów HTML — import Button z '$comp/ui/button' i Input z '$comp/ui/input'. 4. Stosuj rune $state do stanu lokalnego, $derived do wartości zależnych, $effect do efektów ubocznych i $props do właściwości komponentu. 5. Po każdej zmianie komponentu użyj Chrome MCP do zweryfikowania renderowania, stanów interaktywnych (hover, focus, disabled) i responsywności na różnych rozmiarach okna. 6. Współlokalizuj komponenty z logiką API i modelami w ramach feature slice, aby utrzymać spójną strukturę projektu.