Mobile development

Skill Ampli-Group/agentic-mobile-blueprint/.agents/skills/mobile-development

React Native mobile app development patterns with Expo 54, Tamagui, and expo-router. Use when creating screens, components, or navigation in the mobile app.From its SKILL.md

Install

npx -y skills add Ampli-Group/agentic-mobile-blueprint --skill mobile-development

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

3 things to look at

reads credentialsReads from 2 credential sources: `EXPO_PUBLIC_SUPABASE_URL` and 1 more.
4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
runs commandsInstructs the agent to run 7 commands, including `expo run:android` and 6 more.

SKILL.md

2.7 KB, 757 tokens by cl100k_base, as published. Nobody here has run it

Mobile Development

Stack

Expo 54, React Native 0.81, expo-router (file-based routing), Tamagui v4 (UI), TypeScript strict mode.

Local Build Prerequisites

Required to run expo run:android or expo prebuild:

Requirement	Check	Install
Java JDK 17	`java -version` (must show `17.x`)	`brew install openjdk@17`
Android SDK	`echo $ANDROID_HOME` (must be set)	`mise run install`

If expo run:android fails with a Java error:

brew install openjdk@17
export JAVA_HOME="$(brew --prefix openjdk@17)/libexec/openjdk.jdk/Contents/Home"
export PATH="$JAVA_HOME/bin:$PATH"

If expo run:android fails with ANDROID_HOME not set or SDK not found:

export ANDROID_HOME="$HOME/Library/Android/sdk"
export PATH="$ANDROID_HOME/emulator:$ANDROID_HOME/platform-tools:$PATH"

Both are set permanently by mise run install. If missing, re-run it or add to ~/.zshrc manually.

iOS builds require Xcode (App Store). No additional toolchain needed beyond Xcode.

Imports

Use @/ path alias for project root: @/lib/supabase, @/lib/posthog.

UI Components

Use Tamagui components with shorthand props. Never use raw React Native View/Text.

// ✅
import { YStack, XStack, Text, Button, Card, Spinner, ScrollView } from 'tamagui';

<YStack gap="$4" p="$4">
  <Text fos="$6" fow="bold">Title</Text>
  <Button>Action</Button>
</YStack>

// ❌
import { View, Text } from 'react-native';

Common shorthand: bg (background), p/px/py (padding), m/mt (margin), br (borderRadius), bw (borderWidth), boc (borderColor), fos (fontSize), fow (fontWeight), col (color), ai (alignItems), jc (justifyContent), gap, elevate, bordered.

Routing

File-based via expo-router:

app/_layout.tsx — layout wrappers (Stack, Tabs)
app/index.tsx — home screen
app/settings.tsx — named route

Use Stack with headerShown: false (current convention).

New Screen

import { YStack, Text } from 'tamagui';

export default function MyScreen() {
  return (
    <YStack f={1} ai="center" jc="center" bg="$background">
      <Text>My Screen</Text>
    </YStack>
  );
}

Supabase

import { supabase } from '@/lib/supabase';

Single shared client. Uses EXPO_PUBLIC_SUPABASE_URL and EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY.

Theme

Default theme is dark. TamaguiProvider wraps the app in _layout.tsx with defaultTheme="dark".

Environment Variables

All public config uses EXPO_PUBLIC_* prefix. Access via process.env.EXPO_PUBLIC_*.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.