svelte-ui-design
Projektuj interfejsy Svelte 5 z Tailwind CSS 4, Skeleton Labs i Bits UI — kompletny system designu
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Umiejętność do pracy z komponentami Svelte 5 i ich stylizacją. Integruje Tailwind CSS 4, tokeny i presety Skeleton Labs oraz headless komponenty Bits UI. Obejmuje kompozycję klas, systemy kolorów, komponenty interaktywne, formularze, nakładki i całą pracę wizualną. Automatycznie aktywuje się przy tworzeniu lub modyfikacji komponentów Svelte — zawsze używaj jej do stylizacji i designu interfejsów.
Jak używać
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ć.
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.
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ą.
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.
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ć.
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.