Menu
Design navigation architecture using the architect agent
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Apple HIG design intelligence — build, review, animate, and analyze with Apple Human Interface Guidelines for React Native/Expo
Video-based visual debugging — extract key frames from screen recordings and analyze UI bugs over time. Detects animation glitches, race conditions, gesture issues, scroll jank, keyboard overlap, and navigation transitions that screenshots cannot capture.
Auto-generate skills and rules from observed React Native development patterns
ERNE — Implement animations using the ui-designer agent with Reanimated and Gesture Handler
ERNE — Diagnose and fix build failures using the expo-config-resolver agent
ERNE — Comprehensive code review combining code quality and performance analysis
| name | navigate |
| description | Design navigation architecture using the architect agent |
You are executing the /navigate command. Use the architect agent to design navigation structure.
app/
_layout.tsx # Root Stack
index.tsx # Redirect to (tabs)
+not-found.tsx # 404 screen
(tabs)/
_layout.tsx # Tab navigator
index.tsx # Home tab
search.tsx # Search tab
profile.tsx # Profile tab
(auth)/
_layout.tsx # Auth stack (no tabs)
login.tsx
register.tsx
forgot-password.tsx
[entity]/
_layout.tsx # Entity detail stack
[id].tsx # Entity detail screen
[id]/edit.tsx # Edit screen
modal/
_layout.tsx # Modal group
settings.tsx # Settings modal
create-post.tsx # Create post modal
Define navigation patterns:
Generate layout files — Create _layout.tsx files with proper configuration:
// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';
export default function TabLayout() {
return (
<Tabs screenOptions={{ tabBarActiveTintColor: '#007AFF' }}>
<Tabs.Screen name="index" options={{ title: 'Home', tabBarIcon: ... }} />
<Tabs.Screen name="search" options={{ title: 'Search', tabBarIcon: ... }} />
<Tabs.Screen name="profile" options={{ title: 'Profile', tabBarIcon: ... }} />
</Tabs>
);
}
rules/common/navigation.md for conventionsnpx uri-scheme open [url] --ios