expo-react-native-typescript — скилл для Claude Code: правила Expo
Скилл задаёт агенту правила разработки мобильных приложений на Expo, React Native и TypeScript: структура файлов, навигация, состояние, тесты.
npx skills add Mindrally/skills --skill expo-react-native-typescript -a claude-codeЧто делает 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-code2Вручную: положить файлы
~/.claude/skills/expo-react-native-typescript/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/expo-react-native-typescript/
1Через Skills CLI (Vercel)
npx skills add Mindrally/skills --skill expo-react-native-typescript -a codex2Вручную: положить файлы
.agents/skills/expo-react-native-typescript/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Mindrally/skills --skill expo-react-native-typescript -a cursor2Вручную: положить файлы
.cursor/skills/expo-react-native-typescript/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Mindrally/skills expo-react-native-typescript2Вручную: положить файлы
.github/skills/expo-react-native-typescript/SKILL.md1Через Skills CLI (Vercel)
npx skills add Mindrally/skills --skill expo-react-native-typescript -a gemini-cli2Командой платформы
gemini skills install https://github.com/Mindrally/skills --path expo-react-native-typescriptВручную: положить файлы
.devin/skills/expo-react-native-typescript/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Mindrally/skills --skill expo-react-native-typescript -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в 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