React Native

accessibility 스킬은 Web, iOS, Android에서 WCAG 2.2 AA 수준에 맞는 접근 가능한 UI를 설계, 구현, 감사할 수 있도록 돕습니다. 컴포넌트의 역할, 레이블, 상태, 포커스 동작, 접근성 특성을 매핑하는 데 활용할 수 있으며, UX Audit 작업과 구현 검토에 바로 쓸 수 있는 실무형 접근성 가이드를 제공합니다.

react-native-design는 React Native UI 패턴에 집중한 스킬로, StyleSheet 스타일링, 타입이 적용된 React Navigation, 그리고 크로스플랫폼 화면 구현을 위한 Reanimated 3 활용법까지 다룹니다.

react-native-architecture는 프로덕션용 React Native 및 Expo 앱을 설계할 때 라우팅, 상태 경계, 네이티브 모듈, 오프라인 우선 흐름, Expo와 bare 방식의 트레이드오프를 함께 검토할 수 있도록 돕습니다.

vercel-react-native-skills는 성능을 중시하는 프런트엔드 개발을 위한 React Native 및 Expo 스킬입니다. 리스트 렌더링, 애니메이션, 네비게이션, UI 패턴, 상태 관리, 네이티브 모듈 설정을 개선하는 데 활용할 수 있습니다. 모바일 앱의 병목을 더 적은 시행착오로 다루도록 실용적인 규칙, 설치 가이드, 사용 패턴을 제공합니다.

Expo 앱에서 `@expo/ui`를 설치하고 `npx expo run:ios`로 다시 빌드하며, `Host`, `RNHostView`, SDK 55 문서를 기준으로 Expo UI SwiftUI를 올바르게 적용하는 방법을 안내하는 스킬입니다.

upgrading-expo 스킬은 Expo SDK 버전 업그레이드 시 필요한 설치 및 doctor 명령 실행, 캐시 초기화, 그리고 React 19, New Architecture, Native Tabs, `expo-av` 마이그레이션 같은 주요 호환성 변경 대응을 돕습니다.

use-dom 스킬은 Expo DOM components를 사용해 React 웹 코드를 네이티브에서는 webview에서, 웹에서는 일반 방식으로 실행하는 방법을 안내합니다. 이를 통해 브라우저 의존 컴포넌트를 재사용하고, 기존 웹 코드를 단계적으로 이전하는 데 도움을 줍니다.

building-native-ui는 네이티브 감각의 React Native 앱을 위한 Expo Router UI 스킬입니다. 사용 전에 설치 맥락, 라우트 구조, 탭, 헤더, 애니메이션, 미디어, 플랫폼 제한 사항을 미리 파악할 수 있습니다.

expo-api-routes는 EAS Hosting에서 Expo Router API 라우트를 만들 수 있도록 도와주며, 서버 사이드 엔드포인트를 언제 써야 하는지, `app/**/+api.ts` 파일을 어디에 둬야 하는지, 보안성 있는 라우트 핸들러를 어떻게 구성해야 하는지까지 명확하게 안내합니다.

expo-cicd-workflows는 Expo EAS workflow YAML을 생성, 수정, 검증하는 데 도움을 주는 스킬입니다. 스킬을 설치한 뒤 최신 스키마와 문서를 가져와 builds, submissions, updates, 배포 파이프라인에 맞는 `.eas/workflows` 파일을 만들거나 수정할 수 있으며, 검증기 기반 가이드를 통해 오류 가능성을 줄여줍니다.

expo-deployment는 EAS를 사용해 iOS App Store, Google Play, 웹 호스팅, TestFlight, 메타데이터, CI/CD 워크플로까지 Expo 앱 출시를 진행할 수 있도록 돕습니다.

expo-dev-client는 Expo 앱에 개발용 클라이언트가 정말 필요한지 판단하고, 네이티브 테스트를 위해 EAS를 설정한 뒤 로컬 빌드나 TestFlight 배포까지 진행할 때 참고할 수 있는 가이드입니다.

expo-tailwind-setup은 Expo에서 react-native-css와 NativeWind v5를 함께 사용해 iOS, Android, 웹 환경에 Tailwind CSS v4를 설치하고 구성하는 실전 가이드입니다.

Expo UI Jetpack Compose는 Expo 앱에서 Android UI용 `@expo/ui/jetpack-compose`를 설치하고 활용할 수 있도록 돕습니다. Expo SDK 55 기준 안내, 올바른 import 경로, 네이티브 리빌드 단계, `.d.ts` API 확인 방법까지 함께 다룹니다.

react-native-best-practices는 느린 시작, 프레임 드롭, 무거운 렌더링, 메모리 누수, 번들 비대화, 애니메이션 끊김을 다루는 실전 React Native 성능 최적화 가이드입니다. Hermes, 브리지 오버헤드, FlashList, 네이티브 모듈, 릴리스 회귀의 원인 분석과 근거 기반 해결책이 필요할 때 활용하세요.

ui-mobile은 React Native와 인접한 iOS/Android 코드베이스에서 모바일 UI 디자인을 위한 실용 가이드입니다. 접근성 높은 터치 타깃, 대비, 상호작용 규칙에 초점을 맞춰, 더 안전한 화면을 만들고, 컴포넌트를 검토하고, 모바일 사용성을 더 적은 시행착오로 개선할 수 있도록 돕습니다.

Frontend Development를 위한 React Native 모바일 패턴과 플랫폼별 코드 안내입니다. 이 react-native 스킬은 iOS와 Android를 모두 고려해 화면, 컴포넌트, 훅을 유지보수하기 쉬운 구조로 정리하는 데 도움을 줍니다.

upgrading-react-native는 rn-diff-purge 또는 Upgrade Helper diff를 활용해 React Native 버전 업그레이드를 계획하고 실행하도록 돕습니다. 의존성 정렬, iOS/Android 설정 업데이트, 빌드 검증까지 포함해 안내하며, 모노레포나 Expo 기반 프로젝트를 포함한 실제 앱 업그레이드가 필요한 프런트엔드 개발 팀에 유용합니다.