ReddRadar
Agent skill
expo-architect
Scaffold a production-ready Expo React Native app with working screens, navigation, and optional Clerk auth. Generates complete mobile app structure that runs immediately with `bun start`.
Install this agent skill to your Project
npx add-skill https://github.com/mhintz1980/ptl-lova/tree/main/.agents/skills/expo-architect
SKILL.md
Expo Architect
Create production-ready Expo React Native apps with:
- Framework: Expo SDK 54 + React Native 0.83 + TypeScript
- Navigation: Expo Router (file-based routing)
- Auth: Clerk authentication (optional)
- UI: NativeWind (Tailwind for RN) or StyleSheet
- Quality: Biome linting + TypeScript strict mode
- Package Manager: bun
What Makes This Different
Generates working mobile apps, not empty scaffolds:
- Complete navigation structure with working screens
- Optional Clerk authentication flow
- Real UI components with proper styling
- API client integration ready
- Runs immediately with
bun start
Workflow Summary
- PRD Brief Intake - Extract app type, screens, features, auth needs
- Auth Setup (if requested) - Clerk provider, sign-in/sign-up screens
- Screen Generation - Tab or stack-based navigation
- Component Generation - UI components, entity components, layouts
- Quality Setup - Biome, TypeScript strict, path aliases
- Verification - Run quality gate, report results
Usage
# Create app with PRD-style prompt
python3 ~/.claude/skills/expo-architect/scripts/init-expo.py \
--root ~/www/myapp \
--name "My App" \
--brief "A fitness tracker where users can log workouts"
# With specific options
python3 ~/.claude/skills/expo-architect/scripts/init-expo.py \
--root ~/www/myapp \
--name "My App" \
--tabs "Home,Workouts,Profile" \
--auth
Generated Structure
myapp/
├── app/
│ ├── _layout.tsx # Root layout
│ ├── (tabs)/ # Tab navigator
│ │ ├── _layout.tsx
│ │ ├── index.tsx
│ │ └── ...
│ └── (auth)/ # Auth screens (if enabled)
├── components/
│ ├── ui/ # Base UI components
│ ├── [entity]/ # Feature components
│ └── layout/ # Layout components
├── lib/
│ ├── api.ts # API client
│ └── auth.ts # Auth utilities
├── providers/ # Context providers
├── types/ # TypeScript types
├── app.json # Expo config
├── package.json
├── tsconfig.json
└── biome.json
Development Commands
bun start # Start Expo dev server
bun run ios # iOS simulator
bun run android # Android emulator
bun run lint # Check code style
bun run typecheck # Type checking
Environment Variables
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
EXPO_PUBLIC_API_URL=http://localhost:3001
For detailed patterns, code templates, and complete examples: references/full-guide.md
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
mhintz1980/ptl-lova
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
mhintz1980/ptl-lova
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
mhintz1980/ptl-lova
nano-banana-pro-prompts-recommend-skill
Recommend suitable prompts from 6000+ Nano Banana Pro image generation prompts based on user needs. Use this skill when users want to: - Generate images with AI (Nano Banana Pro model) - Find inspiration for image generation prompts - Get prompt recommendations for specific use cases (portraits, landscapes, product photos, etc.) - Create illustrations for articles, videos, podcasts, or other content - Translate and understand prompt techniques
mhintz1980/ptl-lova
expo-react-native-typescript
Expert in Expo React Native TypeScript mobile development with best practices
mhintz1980/ptl-lova
expo-react-native-performance
Expo React Native performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring Expo React Native code to ensure optimal performance patterns. Triggers on tasks involving React Native components, lists, animations, images, or performance improvements.
mhintz1980/ptl-lova
react-native-architecture
Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects.
Didn't find tool you were looking for?