Designs and implements navigation flows using Expo Router (file-based routing). Use when adding new screens, handling deep links, or restructuring the app's layout.
Install
npx skillscat add dtsvetkov1/agent-rules/navigation-architect Install via the SkillsCat registry.
About this skill
The navigation-architect skill designs and implements app navigation using Expo Router's file‑based routing, organizing files to map user flows, handling dynamic routes and deep links, and restructuring layouts. It is used when adding new screens, modifying navigation structure, or ensuring deep link accessibility.
SKILL.md
Navigation Architect Skill
This skill ensures that the app's navigation is intuitive, performant, and follows Expo Router best practices.
Core Concepts
- File-based Routing: Map the file system to the app's navigation structure.
- Dynamic Routes: Use
[id].tsxfor dynamic segments. - Layouts: Use
_layout.tsxfor shared UI (headers, tabs). - Groups: Use
(group)folders to organize routes without affecting the URL. - Typed Routes: Leverage Expo Router's static typing for navigation.
Instructions
- Map User Flow: Define how the user moves between screens.
- Structure
app/: Create the directory structure that matches the flow. - Handle Params: Use
useLocalSearchParamsfor passing data. - Deep Linking: Ensure all routes are accessible via URI schemes.
- Modals: Use layout groups and specific screen options for presentation.
Example
app/
(tabs)/
index.tsx # Home tab
settings.tsx # Settings tab
_layout.tsx # Tab bar configuration
details/
[id].tsx # Item detail screen
_layout.tsx # Root layout (Stack, ThemeProvider)