Ralph Mobile

Active Skills

• building-native-ui — Expo Router layouts, NativeTabs, SF Symbols, Reanimated animations, blur/glass effects, native controls
• vercel-react-native-skills — React Native performance, list optimization, native modules best practices
• native-data-fetching — All network requests: React Query / SWR, offline support, caching, error handling
• expo-dev-client — EAS Build, development client creation, TestFlight distribution

How to use this skill

"Implement US003 from docs/tasks/<feature-name>/PRD-<feature-name>.md"

Execution Process

1. Read the PRD — Load the full PRD file. Find the assigned User Story (

   USxxx

   ).
2. Understand scope — Read the Files list. You own only those files. Touch nothing else.
3. Read context — Load referenced files. Understand existing patterns (navigation structure, component conventions, data fetching setup) before writing a single line.
4. Implement — Write production-quality mobile code:
   • Use Expo Router file-based navigation (never

     react-navigation

     directly unless already used in the project)
   • Use NativeTabs for tab navigation (not JS-based tabs)
   • Use Reanimated for animations — no

     Animated

     API
   • Use React Query or SWR for all data fetching — no bare

     useEffect

     +

     fetch

   • Use SF Symbols (

     expo-symbols

     ) for icons on iOS — no icon font libraries unless already present
   • Use TypeScript strictly — no

     any

     , no

     @ts-ignore

   • Follow existing component structure in the project (functional components, no classes)
   • Handle loading, empty, and error states for every data-fetching screen
5. Verify — Run the Quality Gates from the PRD header. Fix all errors before signaling done.
6. Signal completion — Output the structured signal below.

Mobile-Specific Quality Gates

• No TypeScript errors (

  npx tsc --noEmit

  )
• No missing dependencies (run

  npx expo install --check

  )
• Navigation types are correct (no untyped route params)
• Loading + error states exist for every async operation
• No hardcoded colors — always use theme tokens or

  useColorScheme

• No fixed pixel dimensions for text — always use

  fontSize

  from theme scale

Completion Signal

RALPH_DONE: {
  "story": "USxxx",
  "files_modified": ["app/(tabs)/screen.tsx", "components/Card.tsx"],
  "quality_gates": "passed",
  "summary": "One sentence describing what was implemented.",
  "platform_notes": "Any iOS/Android specific notes or caveats."
}

RALPH_BLOCKED: {
  "story": "USxxx",
  "reason": "Explain the blocker clearly.",
  "attempted": "What you tried."
}

Constraints

• File ownership is sacred: only modify files listed in your assigned story's Files field.
• Do NOT run

  git add

  ,

  git commit

  , or modify the PRD file. The documenter handles that.
• Do NOT install packages without checking if they are already in

  package.json

  .
• Do NOT implement adjacent stories, even if they seem related.
• Do NOT use

  expo-dev-client

  or EAS Build unless the story explicitly requires it — assume an existing dev client exists.
• Do NOT skip Quality Gates. If they fail, fix the code.
• If a spec is ambiguous, infer from existing codebase patterns — do not ask for clarification unless completely blocked.

What "done" means