/ 디렉터리 / 플레이그라운드 / skills
● 커뮤니티 zaferayan ⚡ 바로 사용

skills

제작: zaferayan · zaferayan/skills

Expo + React Native skill for Claude Code — scaffolds screens, wires navigation, and respects the Expo way instead of reinventing it.

An Expo-flavored skill for Claude Code. Teaches Claude to build mobile apps the Expo way: expo-router for navigation, proper EAS config, Expo SDK modules over random npm packages. Avoids the common trap of LLMs suggesting outdated RN-CLI patterns.

왜 쓰나요

핵심 기능

라이브 데모

실제 사용 모습

skills-skill-7.replay ▶ 준비됨
0/0

설치

작성자 저장소 · Claude Skills 공식 문서

사용 사례

실전 활용법: skills

Spin up a new Expo app with tabs and auth in one session

👤 Devs starting a new mobile app who want the boring parts done ⏱ ~45 min beginner

언제 쓸까: Day zero of a new project — you want tabs, stack, and a sign-in flow without reading three blog posts.

흐름
  1. Create the app
    Use the Expo skill. Start a new app 'TaskFlow' with expo-router, TypeScript, and the tabs template. Include a login screen with email/password.✓ 복사됨
    → npx create-expo-app run, then file structure with app/(tabs)/ and app/(auth)/
  2. Add state
    Wire up Zustand for the auth store and persist to SecureStore.✓ 복사됨
    → stores/auth.ts with zustand + persist middleware using expo-secure-store
  3. Test on device
    Start the dev server and give me the QR code to scan.✓ 복사됨
    → npx expo start output

결과: A running app on your phone with tabs, auth, and persistence in under an hour.

함정
  • Claude suggests react-native-cli patterns — Explicitly say 'Expo SDK, expo-router only' in prompts
함께 쓰기: filesystem

Configure EAS Build for iOS and Android

👤 Teams ready to ship TestFlight / Play internal ⏱ ~30 min intermediate

언제 쓸까: First time submitting to TestFlight/Play.

흐름
  1. Generate eas.json
    Use the Expo skill. Generate eas.json with preview (internal) and production profiles, correct bundle identifier patterns, and env var injection.✓ 복사됨
    → Valid eas.json with both profiles
  2. Wire secrets
    Add my Sentry DSN and API base URL as EAS secrets for preview and production separately.✓ 복사됨
    → eas secret:create commands listed
  3. Trigger the build
    Now trigger a preview build for iOS.✓ 복사됨
    → eas build --profile preview --platform ios command

결과: EAS builds running, secrets managed.

함정
  • Committing app.json with secrets inline — Secrets go in EAS env, not app.json; let Claude use expo-constants to read them

Integrate a native module using Expo config plugins

👤 Devs adding functionality that requires native code (camera, biometrics, push) ⏱ ~20 min intermediate

언제 쓸까: You need functionality beyond JS, but don't want to eject.

흐름
  1. Identify the right package
    Use the Expo skill. I need biometric auth. What's the right Expo SDK module and how do I configure it?✓ 복사됨
    → expo-local-authentication named with config plugin entries
  2. Wire config plugin
    Add the config plugin entries and required iOS usage strings.✓ 복사됨
    → app.json diff with plugins array and NSFaceIDUsageDescription

결과: Native module integrated via managed workflow.

함정
  • Adding raw native code and breaking managed workflow — Prefer Expo SDK modules and config plugins; eject only if truly needed

조합

다른 MCP와 조합해 10배 효율

skills-skill-7 + filesystem

Bulk-apply Expo idioms across an existing RN project

Migrate my RN-CLI app to Expo managed workflow; point at the source tree.✓ 복사됨
skills-skill-7 + git

Commit each step separately so EAS setup changes are auditable

Commit the EAS config changes as a distinct commit before adding secrets.✓ 복사됨

도구

이 MCP가 노출하는 것

도구입력언제 호출비용
expo_scaffold app name, template, features Starting a new app 0
eas_config profiles needed Setting up builds 0
config_plugin_wire native module name Adding native features 0

비용 및 제한

운영 비용

API 쿼터
None built-in
호출당 토큰
Moderate
금액
Expo is free; EAS Build has a free tier with paid scaling
팁
Use EAS local builds during dev; cloud builds only for preview/prod.

보안

권한, 시크릿, 파급범위

자격 증명 저장: No direct creds; EAS secrets are managed by Expo
데이터 외부 송신: None from skill itself

문제 해결

자주 발생하는 오류와 해결

Metro can't find module after install

Run npx expo install rather than npm install so SDK-compatible versions are picked

확인: npx expo-doctor
Build fails with 'unrecognized bundle identifier'

Bundle ID mismatch between app.json and Apple Developer portal; align them

Native module not found at runtime

Config plugin didn't run; rebuild with eas build or npx expo prebuild --clean

대안

skills 다른 것과 비교

대안언제 쓰나단점/장점
React Native CLIYou need maximum native control and don't mind managing Xcode/GradleMuch more setup burden
FlutterCross-platform with DartDifferent language, different ecosystem

더 보기

리소스

📖 GitHub에서 공식 README 읽기

🐙 열린 이슈 보기

🔍 400+ MCP 서버 및 Skills 전체 보기