svelte-components

Svelte 5 component patterns for the Exceptionless SPA. Runes, reactivity, props,\nevents, snippets, component organization, and shadcn-svelte integration.\nKeywords: Svelte 5, $state, $derived, $effect, $props, runes, onclick, snippets,\n{@render}, reactive, component composition, shadcn-svelte

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.