skeleton-svelte

Skeleton Svelte to skill wspierający pracę z biblioteką komponentów UI zbudowaną na Tailwind CSS. Zawiera wytyczne dotyczące wzorców kompozycji komponentów, systemu kolorów świadomego motywu oraz predefiniowanych stylów. Aktywuj umiejętność podczas budowania interfejsów użytkownika, stylizacji elementów, tworzenia layoutów lub pracy ze specyficznymi funkcjami Skeleton w Svelte 5 i SvelteKit 2+. Skill dostarcza dokumentację referencyjną i przepływy pracy dla efektywnego wykorzystania systemu projektowania.

1. 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.

2. 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.

3. 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.

4. 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.

5. 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ą.

6. 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.