mobile-navigation

📁 vanman2024/ai-dev-marketplace 📅 2 days ago
3
总安装量
1
周安装量
#61711
全站排名
安装命令
npx skills add https://github.com/vanman2024/ai-dev-marketplace --skill mobile-navigation

Agent 安装分布

amp 1
opencode 1
kimi-cli 1
codex 1
github-copilot 1
claude-code 1

Skill 文档

Mobile Navigation

Comprehensive skill for implementing navigation in React Native/Expo apps.

Overview

React Navigation provides flexible navigation for mobile:

  • Stack, Tab, and Drawer navigators
  • Deep linking and universal links
  • Type-safe navigation with TypeScript
  • Authentication flow handling

Use When

This skill is automatically invoked when:

  • Setting up app navigation structure
  • Implementing authentication flows
  • Configuring deep linking
  • Building complex nested navigators

Available Scripts

Script Description
scripts/setup-navigation.sh Install navigation dependencies
scripts/generate-types.sh Generate TypeScript navigation types

Available Templates

Template Description
templates/root-layout.tsx Root layout with auth flow
templates/tabs-layout.tsx Tab navigator layout
templates/navigation-types.ts TypeScript type definitions
templates/linking-config.ts Deep linking configuration

Navigation Structure

app/
├── _layout.tsx           # Root (auth check)
├── (tabs)/
│   ├── _layout.tsx       # Tab navigator
│   ├── index.tsx         # Home tab
│   └── profile.tsx       # Profile tab
├── auth/
│   ├── login.tsx
│   └── register.tsx
└── [id].tsx              # Dynamic route

Best Practices

  1. Use expo-router for file-based routing
  2. Keep navigation types in dedicated file
  3. Implement auth at root level
  4. Configure deep links for both schemes