AIKraft/AI/Войти
AIKraft/Skills/tamagui

tamagui

Универсальный UI-фреймворк для кроссплатформенных React-приложений. Полезен при создании стилизованных компонентов через styled(), настройке тем с помощью $token и использовании XStack/YStack.

TATamagui official Разработка ★ 14.2k

Что делает навык

Tamagui — это универсальный UI-фреймворк для React с оптимизирующим компилятором, позволяющий создавать кроссплатформенные приложения для веба и нативных платформ. Он решает задачу единообразной стилизации компонентов, управления темами и адаптивности, обеспечивая высокую производительность за счет извлечения стилей в CSS на этапе сборки.

Когда применять

  • Создание кастомных компонентов с использованием функции styled() и вариативных пропсов.
  • Настройка макета интерфейса с помощью стековых компонентов XStack, YStack и ZStack.
  • Реализация адаптивного дизайна через медиа-запросы (например, $gtSm, $gtMd) и хук useMedia.
  • Добавление анимаций появления и исчезновения элементов с помощью AnimatePresence и transition.
  • Создание составных компонентов (compound components), где дочерние элементы наследуют контекст родителя.

Как работает

  1. Выполнить npx tamagui generate-prompt для получения tamagui-prompt.md с актуальными конфигурациями проекта (токены, темы, брейкпоинты).
  2. Импортировать необходимые компоненты (View, Text, styled, XStack и др.) из @tamagui/core или tamagui.
  3. Определять стили компонентов через styled(), обязательно используя префикс $ для токенов и as const для объектов variants.
  4. Строить макет с помощью XStack (row), YStack (column) или ZStack (absolute positioning), задавая gap и padding через токены.
  5. Применять темы через вложенные компоненты Theme или хук useTheme для доступа к значениям цветов.
  6. Настраивать анимации с помощью пропса transition и объектов enterStyle/exitStyle внутри AnimatePresence.

Примеры запросов агенту

Создай компонент карточки на Tamagui с вариативным размером и эффектом возвышения, используя токены из tamagui-prompt.md.
Реализуй адаптивный диалог, который на мобильных устройствах открывается как Sheet, а на десктопе — как модальное окно.
Настрой форму с полями ввода и кнопками, используя YStack для вертикального выравнивания и токены для отступов.

Что понадобится

  • Наличие tamagui-prompt.md, сгенерированного через npx tamagui generate-prompt, для корректного использования токенов и медиа-запросов.
  • Установленные пакеты @tamagui/core и соответствующий драйвер анимаций (например, @tamagui/animations-css).

Описание составлено по SKILL.md навыка, сверено 09.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «tamagui» из репозитория: # https://github.com/tamagui/tamagui
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r tamagui/ ~/.claude/skills/tamagui/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.