Tamagui — скилл для агентов
Tamagui
Четыре скилла в папке skills репозитория Tamagui: стили и темы, миграция на третью версию, схема тем v6 и генератор палитр с предпросмотром
- 14 287 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Скилл миграции запускает кодмод, который массово переписывает файлы проекта с компонентами
- Команды через `npx` скачивают и выполняют пакеты из npm
- Предпросмотр темы передает ее содержимое в адрес страницы на сайте Tamagui
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/tamaguiОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скилл миграции запускает кодмод, который массово переписывает файлы проекта с компонентами
- Команды через `npx` скачивают и выполняют пакеты из npm
- Предпросмотр темы передает ее содержимое в адрес страницы на сайте Tamagui
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
В папке skills репозитория Tamagui лежат четыре скилла для Claude Code, Codex, Cursor и других агентов, которые умеют читать формат SKILL.md. Скилл tamagui учит агента писать компоненты через styled(): варианты, условные значения в одной строке (`bg="background hover:background-hover dark:blue-500"`), токены без знака доллара, темы, анимации и поведение компилятора. Перед работой он просит выполнить `npx tamagui generate-prompt`: команда собирает из конфигурации проекта файл tamagui-prompt.md с именами токенов, тем, медиазапросов и компонентов, и агент берет оттуда настоящие названия, а не выдумывает свои. Скилл tamagui-upgrade-v3 ведет миграцию со второй или первой версии на третью. Агент запускает `npx tamagui migrate --from v2`, который печатает пошаговую инструкцию, затем `npx @tamagui/codemod-flat-values`, который переписывает токены и объекты условий в плоские значения. Скилл отдельно разбирает места, где кодмод не уверен, и случаи тихого изменения значений. Скилл tamagui-v6-config описывает семейство тем v6 (`light`, `dark`, `accent`, `brand`, `inverse`, уровни и `active`) и правило выбора темы для выделенной строки или карточки. Четвертый скилл, tamagui-theme-generator, проектирует палитру из якорных значений оттенка, насыщенности и яркости для светлой и темной схем. Результат агент сохраняет в theme.json и открывает командой `npx tamagui preview-theme ./theme.json`: тема кодируется в base64 и передается в адрес страницы tamagui.dev/theme, где ее раскрывает браузер. С флагом `--print` команда только печатает адрес.
Для кого. Для разработчиков приложений на Tamagui для веба и React Native, которые пишут интерфейс вместе с агентом или переводят проект на третью версию библиотеки.
Подходит, если
- Агент пишет компоненты на Tamagui и путает токены, темы или синтаксис условных значений
- Проект на второй версии, и нужен план перехода на третью с кодмодом и списком мест для ручной правки
- Нужно подобрать цветовую схему бренда и посмотреть ее в браузере до правки `tamagui.config.ts`
- Выбранная строка или карточка мерцает при наведении, и надо понять, какая тема из семейства v6 здесь нужна
- В проекте несколько своих оберток над компонентами, и агенту нужен файл tamagui-prompt.md с их именами
Не подходит, если
- В проекте нет Tamagui: скиллы описывают только эту библиотеку и ее конфигурацию
- Проект остался на первой или второй версии и обновляться не планирует: правила скиллов написаны под третью версию
- Нужен автономный предпросмотр темы без интернета: страница tamagui.dev/theme открывается в браузере из сети
- Интерфейс пишется на Svelte, Vue или без React: Tamagui построен на React
Пример запроса к агенту
Переведи мой проект с Tamagui 2 на 3: запусти кодмод, покажи, что он пометил как неуверенное, и разбери эти места по одномуОграничения
- Описание скиллов в репозитории и сами скиллы расходятся: каталог skills советует ставить с ветки `v3-beta` и называет main второй версией, а тексты скиллов уже написаны под третью. Перед установкой сверьте, с какой ветки берете папку.
- Кодмод третьей версии автоматически разбирает только часть мест. По замеру автора, 80% на одном корпусе кода и 67% на другом, остальное агент правит вручную, а дробные токены вроде `$1.5` дают самую большую долю пометок.
- Репозиторий большой, и скиллы лежат внутри него рядом с кодом библиотеки. Отдельного пакета для них нет, ставятся они командой `npx skills add` с адресом папки.
- В самом репозитории есть и служебные скиллы git-safety и release-safety в папке `.claude/skills`: они нужны разработчикам Tamagui и пользователям не предназначены.
- Предпросмотр темы открывает страницу сайта Tamagui, а в адрес попадает вся тема в base64, поэтому не вставляйте в палитру названия внутренних проектов.
Как отключить. Удалите папки скиллов tamagui, tamagui-upgrade-v3, tamagui-v6-config и tamagui-theme-generator из каталога скиллов агента (например, из `.claude/skills` проекта или из домашней папки). Файл tamagui-prompt.md в проекте создала команда `npx tamagui generate-prompt`, его можно удалить вручную.
Частые вопросы
Что написано в скилле tamagui про условные значения?
Значение стиля состоит из базы и цепочки условий: в строке `dark:hover:navy` оба условия, темная тема и наведение, должны совпасть. Токены и темы пишутся без знака доллара, а имена из нескольких слов идут через дефис, например `background-hover`. Если подходят несколько условий, побеждает более специфичное: платформа весит больше медиазапроса, состояние больше темы.
Чем отличается `npx tamagui migrate --from v2` от кодмода?
Первая команда печатает пошаговую инструкцию миграции: обновление зависимостей, перенос конфигурации и тем, замену устаревших интерфейсов. Кодмод `npx @tamagui/codemod-flat-values` переписывает токены и объекты условий в плоские значения и перечисляет места, где не уверен. Скилл tamagui-upgrade-v3 объясняет, в каком порядке их запускать и как проверить результат.
Как выделить выбранную строку в теме v6?
Скилл tamagui-v6-config советует переключать тему через свойство `theme`, например `theme={selected ? 'active' : null}`, а не через вариант: варианты разбираются после выбора темы и ее не меняют. Фон под темой `active` совпадает с обычным фоном при наведении, поэтому выбранная строка не мерцает.
Что вносит в адрес предпросмотра `npx tamagui preview-theme`?
Команда читает theme.json или строку JSON из флага `--theme`, кодирует тему в base64 и добавляет в адрес страницы tamagui.dev/theme после знака решетки. Браузер раскрывает ее на своей стороне и строит стили. Флаг `--print` выводит адрес и браузер не запускает.
Нужно ли ставить все четыре скилла?
Нет. Команда `npx skills add` принимает адрес отдельной папки, например `.../skills/tamagui-upgrade-v3`. Для повседневной работы хватает скилла tamagui, остальные нужны при миграции, подборе тем и сложной работе со схемой v6.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкиллы Material UI
Material UI agent skills
Четыре официальных скилла Material UI: стилизация, темы, интеграция с Next.js и совместная работа с Tailwind CSS
Реестр устанавливаемых дизайн-скиллов: готовые файлы SKILL.md и DESIGN.md с токенами, правилами компонентов и доступностью под разные стили
Скиллы креативного кода для Claude Code: движение, микровзаимодействия и визуальные системы для веба, Android и Apple
Скиллы Preline UI для агентов: сборка интерфейсов из компонентов Tailwind CSS и генерация тем по токенам
Скилл и MCP-сервер библиотеки Shaders: агент собирает фоны, стекло, градиенты и курсорные эффекты на WebGPU для React, Vue, Svelte, Solid и JS
shadcn-vue — скилл для агентов
shadcn-vue skill
Скилл shadcn-vue читает настройки вашего проекта и учит агента добавлять компоненты, формы и темы Vue-порта shadcn/ui по правилам библиотеки
Коротко о README
Главная страница репозитория показывает логотип, ссылки на документацию и рекомендует начинать со стартовых проектов через `npm create tamagui@latest`. Про скиллы рассказывает отдельный файл в папке skills: в нем таблица из трех скиллов (генератор тем в нее не вошел, хотя папка у него есть), две команды установки (всех сразу или одного), раздел про файл tamagui-prompt.md для конфигурации конкретного проекта и ссылки на документацию, руководство по обновлению и Discord. Каждый скилл состоит из файла SKILL.md, у tamagui и tamagui-upgrade-v3 есть еще справочные материалы в подпапке `references`.
Бейдж для README
Исходный SKILL.md
--- name: tamagui description: Universal React UI framework for web and native with flat conditional values. Use when building cross-platform apps with Tamagui, writing styled components, or applying tokens, themes, animations, and media queries. metadata: version: 3.0.0 --- # Tamagui Skill Universal React UI framework for web and native. In v3, conditions are flat clauses in the style value, tokens and themes are bare names, and nested condition props such as `hoverStyle` are removed. ## 1. Project Configuration First Before writing Tamagui code, generate or read the project prompt: ```bash npx tamagui generate-prompt ``` This writes `tamagui-prompt.md` containing the project's exact token names, theme keys, media breakpoints, shorthands, and components. In an existing app, always inspect and use the project's local component wrappers first before importing from raw packages. ## 2. Flat Value Grammar Every conditional style value follows this grammar: ```txt value := base? clause* clause := modifier(:modifier)*:payload ``` - Modifiers chain left-to-right: `dark:hover:navy` applies when both dark and hover match. - Payloads extend to the next top-level clause or end of string. - An empty payload is invalid. Clear a property with `none`, `transparent`, `initial`, or `unset`.