svelte-ui-design

ALWAYS use this skill for ANY Svelte component styling, design, or UI work. Svelte 5 UI design system using Tailwind CSS 4, Skeleton Labs design tokens/presets/Tailwind Components, and Bits UI headless components. Covers class composition, color systems, interactive components, forms, overlays, and all visual design.

1. Upewnij się, że masz zainstalowany Svelte 5 w swoim projekcie. Skill automatycznie aktywuje się, gdy pracujesz nad komponentami Svelte lub stylizacją interfejsu — nie musisz go ręcznie włączać.

2. Podczas tworzenia lub modyfikacji komponentu Svelte opisz, co chcesz zbudować: przycisk, formularz, kartę, dialog lub inny element interfejsu. Skill będzie sugerować komponenty z Bits UI (headless) i presety Skeleton Labs.

3. Odwołuj się do systemu kolorów i presetów Skeleton Labs — nigdy nie twórz własnych kombinacji odcieni. Skill ma dostęp do oficjalnej dokumentacji kolorów i Color Pairings, które gwarantują spójność wizualną.

4. Używaj presetów Skeleton Labs (na przykład preset-filled, preset-tonal) zamiast pisania klas ręcznie. Skill będzie proponować gotowe kombinacje klas dla typowych komponentów: card, chip, badge, placeholder i innych.

5. Dla responsywności, animacji, przejść i stylów warunkowych polegaj na narzędziach Tailwind CSS 4 — skill zna jego pełny zestaw narzędzi. Jeśli potrzebujesz dark mode lub dynamicznych wartości, skill podpowie, jak je wdrożyć.

6. Gdy masz wątpliwości dotyczące typografii, odstępów lub ikon, skill odwoła się do odpowiednich sekcji dokumentacji Skeleton Labs — nie musisz szukać sam.