erne-navigate

ERNE — Design navigation architecture using the architect agent

Installs: 0
Used in: 1 repos
Updated: 3w ago
$npx ai-builder add skill jubakitiashvili/erne-navigate

Installs to .claude/skills/erne-navigate/

# /erne-navigate — Navigation Design

You are executing the `/erne-navigate` command. Use the **architect** agent to design navigation structure.

## Process

1. **Map the screens** — List all screens and their relationships
2. **Design the hierarchy** — Determine navigation stacks, tabs, drawers
3. **Plan Expo Router file structure** — Map screens to file-based routes

## Output: Expo Router File 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
```

3. **Define navigation patterns**:
   - Tab-to-detail: How tabs navigate to detail screens
   - Auth flow: How unauthenticated users are redirected
   - Deep linking: URL scheme mapping
   - Modal presentation: Full-screen vs bottom sheet

4. **Generate layout files** — Create `_layout.tsx` files with proper configuration:

```tsx
// 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>
  );
}
```

## Notes
- Reference `rules/common/navigation.md` for conventions
- Consider deep link testing: `npx uri-scheme open [url] --ios`
- Include typed route definitions

Quick Install

$npx ai-builder add skill jubakitiashvili/erne-navigate

Details

Type
skill
Slug
jubakitiashvili/erne-navigate
Created
3w ago

More by jubakitiashvili