component-builder

Skill do budowania komponentów interfejsu z użyciem tailwind-variants, zapewniający bezpieczeństwo typów i spójność kodu. Dokumentuje wzorzec projektowy stosowany w projektach Svelte, gdzie każdy komponent składa się z pliku wariantów (variants.ts) definiującego style oraz pliku komponentu Svelte. Zawiera przykłady kanoniczne, warianty złożone i wielowymiarowe. Idealne dla deweloperów pracujących nad bibliotekami komponentów UI, którzy chcą utrzymać konsystencję i ułatwić refaktoryzację istniejących elementów interfejsu.

1. Zainstaluj skill component-builder w swoim projekcie Svelte. Skill zawiera dokumentację wzorca tailwind-variants używanego do tworzenia komponentów UI w katalogu src/lib/ui/. 2. Przed utworzeniem nowego komponentu zapoznaj się z plikami referencyjnymi: Button.svelte i button.variants.ts (przykład podstawowy), Tag.svelte i tag.variants.ts (warianty złożone) oraz ContentCard.svelte i contentCard.variants.ts (warianty wielowymiarowe). 3. Utwórz dwa pliki dla każdego komponentu: plik wariantów (componentName.variants.ts) zawierający definicje stylów z użyciem tv() z tailwind-variants oraz plik komponentu (ComponentName.svelte) importujący warianty i typy. 4. W pliku wariantów zdefiniuj bazowe klasy, wymiary wariantów (np. primary, secondary), rozmiary (sm, md, lg) oraz warianty domyślne. Wyeksportuj typy dla każdego wymiaru wariantu. 5. W komponencie Svelte zaimportuj warianty i typy, następnie przekaż props (variant, size) do funkcji wariantów, aby wygenerować ostateczne klasy CSS. 6. Użyj tego skilla gdy tworzysz nowe komponenty w src/lib/ui/, refaktoryzujesz istniejące komponenty lub dodajesz nowe warianty do już istniejących elementów.