скилл CX Codex

styling-nativewind-v4-expo — скилл для Claude Code

Q: Как установить styling-nativewind-v4-expo в Claude Code?

Выполните команду `npx skills add tristanmanchester/agent-skills --skill styling-nativewind-v4-expo -a claude-code`. Скилл сохранится по пути `~/.claude/skills/styling-nativewind-v4-expo/SKILL.md`.

Помогает настроить NativeWind v4 и Tailwind CSS v3 в Expo, устранить ошибки сборки Metro и правильно верстать мобильные компоненты.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓

npx skills add tristanmanchester/agent-skills --skill styling-nativewind-v4-expo -a claude-code

Открыть на GitHub

Что делает styling-nativewind-v4-expo

Скилл ориентирован строго на связку NativeWind v4 и tailwindcss@^3.4.17. Он помогает прописать единый входной CSS-файл, параметры Babel и плагин withNativeWind для Metro. Конфигурация для пятой версии фреймворка принципиально иная, поэтому сюда она не входит.

Процесс отладки выстроен по цепочке: сначала проверка мажорных версий пакетов и компиляция CSS через CLI, затем сопоставление путей импорта в src/app. Очистка кэша Metro не спасёт, если в проект случайно попал Tailwind v4 или разошлись нативные зависимости Expo SDK.

Для вёрстки скилл задаёт правила со статическими словарями вариантов вместо склеивания динамических строк. Внешние библиотеки подключаются через разовый вызов cssInterop, а палитры настраиваются через переменные темы NativeWind v4.

Какие задачи решает

настроить Metro и Babel для NativeWind v4 в приложении Expo
устранить несовместимость версий Tailwind CSS v3 и v4
подключить сторонние компоненты React Native через cssInterop
проверить поведение стилей в тёмной теме и с учётом безопасных зон

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

Настрой NativeWind v4 в нашем проекте на Expo Router с Tailwind v3
Проверь конфиги Metro и Babel, стили перестали применяться к компонентам
Сделай кнопку с состояниями нажатия через статическую карту вариантов

Как установить styling-nativewind-v4-expo

1Через Skills CLI (Vercel)

npx skills add tristanmanchester/agent-skills --skill styling-nativewind-v4-expo -a claude-code

2Вручную: положить файлы

~/.claude/skills/styling-nativewind-v4-expo/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/styling-nativewind-v4-expo/

1Через Skills CLI (Vercel)

npx skills add tristanmanchester/agent-skills --skill styling-nativewind-v4-expo -a codex

2Вручную: положить файлы

.agents/skills/styling-nativewind-v4-expo/SKILL.md

Для всех проектов — ~/.agents/skills/

1Через Skills CLI (Vercel)

npx skills add tristanmanchester/agent-skills --skill styling-nativewind-v4-expo -a cursor

2Вручную: положить файлы

.cursor/skills/styling-nativewind-v4-expo/SKILL.md

Cursor читает и .agents/skills/, и .claude/skills/

1GitHub CLI

gh skill install tristanmanchester/agent-skills styling-nativewind-v4-expo

2Вручную: положить файлы

.github/skills/styling-nativewind-v4-expo/SKILL.md

1Через Skills CLI (Vercel)

npx skills add tristanmanchester/agent-skills --skill styling-nativewind-v4-expo -a gemini-cli

2Командой платформы

gemini skills install https://github.com/tristanmanchester/agent-skills --path styling-nativewind-v4-expo

Вручную: положить файлы

.devin/skills/styling-nativewind-v4-expo/SKILL.md

Старый путь .windsurf/skills/ тоже читается

Через Skills CLI (Vercel)

npx skills add tristanmanchester/agent-skills --skill styling-nativewind-v4-expo -a opencode

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о styling-nativewind-v4-expo

Как установить styling-nativewind-v4-expo в Claude Code?

Выполните команду npx skills add tristanmanchester/agent-skills --skill styling-nativewind-v4-expo -a claude-code. Скилл сохранится по пути ~/.claude/skills/styling-nativewind-v4-expo/SKILL.md.

Что делает этот скилл?

Он задаёт правила интеграции NativeWind v4 в мобильные приложения на Expo, проверяя связку Metro, Babel и CSS-файлов.

Работает ли скилл с NativeWind v5?

Нет, он рассчитан строго на NativeWind v4 и Tailwind CSS v3. Пятая версия использует другой стек сборки и требует отдельного набора инструкций.

vercel-react-native-skills vercel Набор правил по React Native и Expo для ИИ-агента: списки, анимации, навигация. Пригодится, когда агент правит мобильный код и надо, чтобы он делал это одинаково. CX Codex +1 255 200установок animate-expo emilkowalski Создаёт мобильные анимации для React Native и Expo на базе Reanimated и Gesture Handler. Помогает избежать просадок кадров на реальных устройствах. CX Codex +1 137 900установок mobile-native emilkowalski Убирает мелочи, из-за которых веб-приложение на телефоне выдаёт себя: залипающий hover, вспышку при тапе, ошибку с 100vh. CX Codex +1 86 600установок aso coreyhaines31 Анализирует страницы приложений в App Store и Google Play по правилам поисковой оптимизации. Находит слабые места в метаданных, графике и конверсии. CX Codex +1 75 900установок paywalls coreyhaines31 Скилл помогает проектировать и улучшать экран оплаты, апгрейд, upsell-модалку и ограничения функций. Нужен, когда бесплатного пользователя подводят к платному плану. CX Codex +1 71 000установок swiftui-pro Paul Hudson Проверяет SwiftUI-код на устаревшие API, ошибки в структуре и проблемы доступности. Пригодится для ревью и доработки проектов на SwiftUI. CX Codex +1 35 200установок

Из того же набора3

designing-beautiful-websites Скилл для проектирования и правки интерфейсов сайтов и веб-приложений: структура, адаптив, визуальный язык и состояния элементов. CX Codex +1 2 800установок animating-react-native-expo Скилл для ИИ-агента, который помогает писать и отлаживать анимации в React Native и Expo на Reanimated 4 и Gesture Handler 3. CX Codex +1 413установок