react-native-unistyles-v3 — скилл для Claude Code: стили RN
Скилл ведёт агента по react-native-unistyles v3: настройка Babel или Metro, темы, брейкпоинты, варианты и разбор типичных ошибок.
npx skills add jpudysz/react-native-unistyles --skill react-native-unistyles-v3 -a claude-codeЧто делает react-native-unistyles-v3
Скилл включается, когда в коде или запросе всплывают unistyles, StyleSheet.create, withUnistyles, useUnistyles, ScopedTheme, UnistylesRuntime, брейкпоинты или адаптивные темы. Агент сначала читает ваш код, определяет задачу — первичная настройка, добавление темы, отзывчивая вёрстка, починка бага — и дальше применяет паттерны v3, сверяясь со справочными файлами скилла.
Внутри — краткая шпаргалка по трём перегрузкам StyleSheet.create, разовой настройке через StyleSheet.configure, вариантам и compoundVariants, обёртке withUnistyles для пропсов вроде color и trackColor. Отдельный блок правил перечисляет, на чём обычно ломается: спред стилей {...styles.x} рвёт привязку C++ прокси, реэкспорт StyleSheet из barrel-файла не распознаётся плагином, а без сборщика — Babel-плагина, Metro-интеграции или RepackUnistylePlugin — стили перестают быть реактивными. useVariants вызывается до обращения к стилям и всегда получает объект: useVariants(undefined) падает на нативной стороне.
Проект должен быть на React Native 0.81+ с обязательной New Architecture, React 19+ и пакетом react-native-nitro-modules закреплённой версии. Для Expo нужен SDK 54+ и dev client или prebuild — с Expo Go это не заработает. Скилл может править файлы и запускать npx, так что доступ к репозиторию у агента будет.
Какие задачи решает
- подключить react-native-unistyles v3 к проекту на React Native
- вынести цвета и типографику в переключаемые темы
- сделать вёрстку адаптивной через брейкпоинты и miniRuntime
- описать варианты кнопки и собрать compoundVariants
- найти причину, по которой стили не обновляются при смене темы
Примеры запросов агенту
- Настрой unistyles в проекте: Babel-плагин с root на src и StyleSheet.configure с темами light и dark
- Добавь в кнопку варианты size и color, а для large и primary — рамку через compoundVariants
- Перепиши этот экран на брейкпоинты unistyles, чтобы ширина контейнера зависела от rt.screen
Как установить react-native-unistyles-v3
1Через Skills CLI (Vercel)
npx skills add jpudysz/react-native-unistyles --skill react-native-unistyles-v3 -a claude-code2Вручную: положить файлы
~/.claude/skills/react-native-unistyles-v3/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/react-native-unistyles-v3/
1Через Skills CLI (Vercel)
npx skills add jpudysz/react-native-unistyles --skill react-native-unistyles-v3 -a codex2Вручную: положить файлы
.agents/skills/react-native-unistyles-v3/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add jpudysz/react-native-unistyles --skill react-native-unistyles-v3 -a cursor2Вручную: положить файлы
.cursor/skills/react-native-unistyles-v3/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install jpudysz/react-native-unistyles react-native-unistyles-v32Вручную: положить файлы
.github/skills/react-native-unistyles-v3/SKILL.md1Через Skills CLI (Vercel)
npx skills add jpudysz/react-native-unistyles --skill react-native-unistyles-v3 -a gemini-cli2Командой платформы
gemini skills install https://github.com/jpudysz/react-native-unistyles --path skills/react-native-unistyles-v3Вручную: положить файлы
.devin/skills/react-native-unistyles-v3/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add jpudysz/react-native-unistyles --skill react-native-unistyles-v3 -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о react-native-unistyles-v3
Как установить react-native-unistyles-v3 в Claude Code?
Выполните npx skills add jpudysz/react-native-unistyles --skill react-native-unistyles-v3 -a claude-code. Файл скилла появится по пути ~/.claude/skills/react-native-unistyles-v3/SKILL.md.
Что делает этот скилл?
Проводит агента по работе с react-native-unistyles v3: настройка сборки, темы, отзывчивые стили, варианты, интеграция со сторонними компонентами и разбор ошибок.
Какие версии React Native и Expo нужны?
React Native 0.81+ с New Architecture, React 19+ и react-native-nitro-modules закреплённой версии. Для Expo — SDK 54+ и dev client или prebuild, Expo Go не подойдёт.
