tamagui

Universal React UI framework for web and native. Use when building cross-platform apps with Tamagui,\ncreating styled components with styled(), configuring design tokens/themes, using Tamagui UI components,\nor working with animations. Triggers: \

1. Zainstaluj skill Tamagui w swoim projekcie — skill aktywuje się automatycznie, gdy rozpozna importy z pakietów @tamagui/*, użycie funkcji styled() lub referencje do tokenów z prefiksem $. 2. Przed napisaniem kodu uruchom npx tamagui generate-prompt w katalogu projektu — polecenie wygeneruje plik tamagui-prompt.md zawierający design tokeny (space, size, radius, color, zIndex), dostępne tematy, komponenty UI, media query breakpoints oraz właściwości skrótowe specyficzne dla Twojego projektu. 3. Otwórz wygenerowany plik tamagui-prompt.md i zapoznaj się z dostępnymi tokenami oraz nazwami tematów — zawsze odwołuj się do tego pliku zamiast zgadywać nazwy, aby uniknąć błędów. 4. Twórz komponenty za pomocą funkcji styled(), rozszerzając istniejące komponenty bazowe (View, Text) — pamiętaj o dodaniu as const do obiektu variants dla poprawnego wnioskowania typów oraz używaj prefiksu $ przy odwołaniach do tokenów. 5. Wykorzystuj komponenty Stack (XStack dla flexDirection: 'row', YStack dla flexDirection: 'column') do budowania layoutów oraz definiuj warianty komponentów, aby obsługiwać różne stany i rozmiary — warianty zdefiniowane później w obiekcie przesłaniają wcześniejsze. 6. Skill automatycznie podpowiada dostępne tokeny, komponenty i właściwości na podstawie konfiguracji projektu — jeśli pracujesz z animacjami lub useTheme, skill dostosuje sugestie do kontekstu Twojego kodu.