# styling-nativewind-v4-expo

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

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 410 установок · ★ 3
- Автор: tristanmanchester
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/tristanmanchester/agent-skills/tree/HEAD/styling-nativewind-v4-expo/SKILL.md
- Обновлён: 2026-09-14
- HTML: https://affpapa.org/nevibecode/skills/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.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
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/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add tristanmanchester/agent-skills --skill styling-nativewind-v4-expo -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/styling-nativewind-v4-expo/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
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/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install tristanmanchester/agent-skills styling-nativewind-v4-expo
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/styling-nativewind-v4-expo/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add tristanmanchester/agent-skills --skill styling-nativewind-v4-expo -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/tristanmanchester/agent-skills --path styling-nativewind-v4-expo
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/styling-nativewind-v4-expo/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add tristanmanchester/agent-skills --skill styling-nativewind-v4-expo -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/tristanmanchester/agent-skills/tree/HEAD/styling-nativewind-v4-expo/SKILL.md

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

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

## Похожие
- [vercel-react-native-skills](https://affpapa.org/nevibecode/skills/vercel-react-native-skills.md) — скилл · 255200 установок
- [animate-expo](https://affpapa.org/nevibecode/skills/animate-expo.md) — скилл · 137900 установок
- [mobile-native](https://affpapa.org/nevibecode/skills/mobile-native.md) — скилл · 86600 установок
- [aso](https://affpapa.org/nevibecode/skills/aso.md) — скилл · 75900 установок
- [paywalls](https://affpapa.org/nevibecode/skills/paywalls.md) — скилл · 71000 установок
- [swiftui-pro](https://affpapa.org/nevibecode/skills/swiftui-pro.md) — скилл · 35200 установок

Из того же набора: [tristanmanchester/agent-skills](https://affpapa.org/nevibecode/by/tristanmanchester/agent-skills.md) — 3 карточки

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md