tamagui

Tamagui to framework React umożliwiający tworzenie interfejsów użytkownika dla aplikacji webowych i natywnych z jednej bazy kodu. Pracujesz ze stylizowanymi komponentami za pomocą funkcji styled(), definiujesz design tokeny i tematy, a następnie wykorzystujesz gotowe komponenty UI oraz animacje. Skill wspiera pracę z XStack/YStack, konfiguracją tematów, mediaqueries i wariantami komponentów. Przed napisaniem kodu wygeneruj konfigurację projektu, aby uzyskać dokładne nazwy tokenów, dostępne komponenty i punkty przerwania specyficzne dla Twojej aplikacji.

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.