C
component-builder
Create UI components using tailwind-variants for type-safe styling. Use when creating or editing components in src/lib/ui/.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Create UI components using tailwind-variants for type-safe styling. Use when creating or editing components in src/lib/ui/.
How to use
- 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.