Agent skill
navigation-architect
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 this agent skill to your Project
npx add-skill https://github.com/dtsvetkov1/agent-rules/tree/main/skills/navigation-architect
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)
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
dtsvetkov1/agent-rules
change-writer
Generates clean, human-readable changelogs and release notes from git commits and file changes. Use when preparing for a release or summarizing recent work.
dtsvetkov1/agent-rules
doc-sync
Ensures that documentation files like README.md and AGENTS.md stay in sync with the actual code and project structure. Use when adding new features or changing project architecture.
dtsvetkov1/agent-rules
security-audit
Scans code for security vulnerabilities, hardcoded secrets, and unsafe patterns in React Native and Expo applications. Use before merging sensitive changes or as part of a regular audit.
dtsvetkov1/agent-rules
api-expert
Handles backend integration using best practices like expo/fetch and React Query. Use when the user needs to connect to an API, handle data fetching, or implement caching.
dtsvetkov1/agent-rules
opinion-critic
Provides critical feedback and alternative architectural perspectives on code changes. Use when you want to explore different ways to implement a feature or find potential flaws in the current plan.
dtsvetkov1/agent-rules
mobile-perf
Optimizes React Native Expo applications for speed, responsiveness, and battery efficiency. Use when fixing lag, optimizing lists, or reducing bundle size.
Didn't find tool you were looking for?