К основному содержанию
скилл CX Codex

expo-react-native-typescript — скилл для Claude Code: правила Expo

Скилл задаёт агенту правила разработки мобильных приложений на Expo, React Native и TypeScript: структура файлов, навигация, состояние, тесты.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add Mindrally/skills --skill expo-react-native-typescript -a claude-code
Открыть на GitHub

Что делает expo-react-native-typescript

Скилл подключается к агенту и превращает его в инструктора по мобильной разработке на Expo и React Native. Внутри — набор соглашений: функциональные компоненты вместо классов, интерфейсы вместо типов, отказ от enum в пользу map, строгий режим TypeScript. Каталоги именуются строчными буквами с дефисами, вроде components/auth-wizard.

Отдельные блоки посвящены вёрстке и производительности. Адаптивность строится на Flexbox и useWindowDimensions, тёмная тема — через useColorScheme, безопасные зоны — на SafeAreaProvider из react-native-safe-area-context. Агент будет советовать реже использовать useState и useEffect в пользу Context и редьюсеров, а картинки сжимать в WebP с ленивой загрузкой через expo-image.

Для навигации скилл называет react-navigation, для глобального состояния — Context с useReducer или Zustand, для запросов — react-query. Валидация на входе — Zod, тесты — Jest и React Native Testing Library. Учтите: скилл рассчитан на managed workflow Expo, поэтому в проекте с голым React Native и своей нативной сборкой часть советов придётся отбросить.

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

  • задать структуру папок и файлов в новом Expo-проекте
  • выбрать способ хранения глобального состояния
  • настроить безопасные зоны под вырезы экрана
  • добавить тёмную тему без ручной проверки схемы
  • покрыть компоненты тестами на Jest

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

  • помоги спроектировать структуру папок для Expo-приложения на TypeScript
  • как в этом проекте организовать навигацию и глобальное состояние?
  • проверь мой компонент на соответствие правилам скилла

Как установить expo-react-native-typescript

1Через Skills CLI (Vercel)

npx skills add Mindrally/skills --skill expo-react-native-typescript -a claude-code

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

~/.claude/skills/expo-react-native-typescript/SKILL.md

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

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

Вопросы о expo-react-native-typescript

Как установить expo-react-native-typescript в Claude?

Выполните npx skills add Mindrally/skills --skill expo-react-native-typescript -a claude-code. Файл скилла окажется по пути ~/.claude/skills/expo-react-native-typescript/SKILL.md.

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

Он даёт агенту свод правил по Expo, React Native и TypeScript: соглашения по коду, вёрстке, навигации, состоянию, обработке ошибок и тестам.

Нужен ли скилл в проекте без Expo?

Он опирается на managed workflow Expo и его встроенные компоненты. В голом React Native с собственной нативной сборкой часть рекомендаций не применима.

Исходный текст

SKILL.md · Apache-2.0
---
name: expo-react-native-typescript
description: Expert in Expo React Native TypeScript mobile development with best practices
metadata:
  maintainer: Mindrally
  source: https://github.com/Mindrally/skills
---

# Expo React Native TypeScript

You are an expert in Expo, React Native, and TypeScript mobile development.

## Core Principles

- Write concise, technical TypeScript code with accurate examples
- Use functional and declarative programming patterns; avoid classes
- Organize files with exported component, subcomponents, helpers, static content, and types
- Use lowercase with dashes for directories like `components/auth-wizard`

## TypeScript Standards

- Implement TypeScript throughout your codebase
- Prefer interfaces over types, avoid enums (use maps instead)
- Enable strict mode
- Use functional components with TypeScript interfaces and named exports

## UI & Styling

- Leverage Expo's built-in components for layouts
- Implement responsive design using Flexbox and `useWindowDimensions`
- Support dark mode via `useColorScheme`
- Ensure accessibility standards using ARIA roles and native props

## Safe Area Management

- Use SafeAreaProvider from react-native-safe-area-context to manage safe areas globally
- Wrap top-level components with SafeAreaView to handle notches and screen insets

## Performance Optimization

- Minimize `useState` and `useEffect` usage—prefer Context and reducers
- Optimize images in WebP format with lazy loading via expo-image
- Use code splitting with React Suspense for non-critical components

## Navigation & State

- Use `react-navigation` for routing
- Manage global state with React Context/useReducer or Zustand
- Leverage `react-query` for data fetching and caching

## Error Handling

- Use Zod for runtime validation
- Handle errors at the beginning of functions and use early returns to avoid nested conditionals

## Testing & Security

- Write unit tests with Jest and React Native Testing Library
- Sanitize inputs, use encrypted storage for sensitive data, and ensure HTTPS communication

## Key Conventions

- Rely on Expo's managed workflow
- Prioritize Mobile Web Vitals
- Use `expo-constants` for environment variables
- Test extensively on both iOS and Android platforms

© Mindrally · Apache-2.0 · Mindrally/skills

Похожие скиллы

Всё по теме «Мобильная разработка» →
expo-react-native-coder pproenca Скилл с 50 правилами и шаблонами кода для разработки мобильных приложений на Expo и React Native. Пригодится при сборке экранов, навигации и авторизации. CX Codex +1 409установок react-native-expo-cursorrules-prompt-file PatrickJS Правило для Cursor, которое задаёт агенту стек и структуру проекта на React Native с Expo. Пригодится, когда нужно, чтобы код в проекте писался единообразно. ★ 41 011звёзд репо react-native alinaqi Скилл задаёт структуру проекта, паттерны компонентов и правила тестирования для React Native. Пригодится, когда агент правит .tsx или код под iOS и Android. CX Codex +1 566установок react-native-expert https://github.com/Jeffallan Скилл для агентов ИИ-кодинга: помогает собирать мобильные приложения на React Native и Expo — навигация, нативные модули, скорость списков, код под iOS и Android. CX Codex +1 4 900установок expo-web-to-native expo Помогает перенести существующее React-приложение с веба в нативное iOS/Android-приложение на Expo. Нужен для поэтапной миграции экранов. CX Codex +1 19 600установок expo-react-native-performance pproenca Набор из 42 правил оптимизации приложений на Expo и React Native. Помогает настроить запуск, списки на FlashList, анимации и рендеринг без ручного поиска узких мест. CX Codex +1 1 500установок

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

framer-motion Задаёт агенту правила анимаций на Motion: что анимировать, а что ломает раскладку. Пригодится, когда в проекте уже есть React и TypeScript. CX Codex +1 3 000установок chrome-extension-development Ведёт агента по сборке расширений Chrome на Manifest V3: манифест, service worker, content scripts, попап, публикация в Chrome Web Store. CX Codex +1 2 800установок mysql-best-practices Скилл задаёт агенту правила проектирования схем MySQL, индексов и оптимизации запросов. Пригодится, когда агент пишет миграции или разбирает медленный запрос. CX Codex +1 2 700установок odoo-development Скилл для ИИ-агента, который подсказывает, как писать модули Odoo: модели на Python ORM, XML-представления, права доступа. CX Codex +1 2 300установок redis-best-practices Набор практик и готовых паттернов для работы с Redis в Claude Code. Помогает настроить структуры данных, инвалидацию кэша и блокировки без ошибок. CX Codex +1 2 200установок machine-learning Скилл для разработки на JAX: подсказывает агенту функциональные приёмы, JIT и работу с ключами генератора случайных чисел. CX Codex +1 2 100установок typeorm Скилл задаёт агенту правила работы с TypeORM: сущности, связи, репозитории и миграции. Пригодится, когда проект на TypeScript с базой данных. CX Codex +1 2 000установок scrapy-web-scraping Скилл для ИИ-агента, который ведёт разработку краулеров на Scrapy: пауки, извлечение данных, пайплайны и настройки продакшена. CX Codex +1 2 000установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой