skeleton-svelte
Use this skill when working with Skeleton UI components in Svelte projects. It provides guidelines for Skeleton's component composition pattern, theme-aware color system, design presets, and layout patterns. Trigger when building UI components, styling elements, creating
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Use this skill when working with Skeleton UI components in Svelte projects. It provides guidelines for Skeleton's component composition pattern, theme-aware color system, design presets, and layout patterns. Trigger when building UI components, styling elements, creating layouts, or working with Skeleton-specific features in Svelte 5 and SvelteKit 2+ projects.
How to use
Zainstaluj pakiet @skeletonlabs/skeleton-svelte w swoim projekcie Svelte 5 lub SvelteKit 2+. Skill będzie dostępny dla Claude'a podczas pracy z kodem.
Podczas budowania komponentów UI używaj wzorca kompozycji Skeleton, gdzie komponenty zawierają granularne komponenty podrzędne. Każdy komponent akceptuje dowolne właściwości i atrybut class do stylizacji.
Zawsze stosuj parowanie kolorów dla stylizacji świadomej motywu zamiast hardkodowania kolorów z prefiksami dark:. Używaj składni {property}-{color}-{lightShade}-{darkShade}, na przykład bg-surface-50-950 dla tła lub text-surface-950-50 dla tekstu.
Skorzystaj z predefiniowanych presetów stylów dostępnych w Skeleton, takich jak preset-filled-surface-100-900, aby szybko zastosować spójne style do komponentów Card i innych elementów interfejsu.
Odwołaj się do systemu kolorów i wzorców layoutu Skeleton opisanych w dokumentacji umiejętności, gdy Claude będzie pomagać w tworzeniu nowych komponentów lub rozwiązywaniu problemów ze stylizacją.
Aktywuj skill jawnie, informując Claude'a, że pracujesz z Skeleton UI, aby otrzymać precyzyjne wskazówki dotyczące najlepszych praktyk i wzorców specyficznych dla tej biblioteki.