1---2name: li-lance-android-seraphim-framework-flutter-auto-route-navig3description: AutoRoute Navigation4---56# AutoRoute Navigation78## **Priority: P1 (HIGH)**910Type-safe routing system with code generation using `auto_route`.1112## Structure1314```text15core/router/16├── app_router.dart # Router configuration17└── app_router.gr.dart # Generated routes18```1920## Implementation Workflow21221. **Annotate pages** — Mark all screen/page widgets with `@RoutePage()`.232. **Configure router** — Extend `_$AppRouter` and annotate with `@AutoRouterConfig`.243. **Navigate with types** — Use generated route classes (e.g., `HomeRoute()`). Never use strings.254. **Add guards** — Implement `AutoRouteGuard` for authentication/authorization logic.265. **Handle parameters** — Constructors of `@RoutePage` widgets automatically become route27 parameters.286. **Prefer declarative calls** — Use `context.pushRoute()` or `context.replaceRoute()`.2930### Nested Routes & Tabs3132Use `children` in `AutoRoute` for tabs. Pass the `children` parameter to define the initial active33sub-route.3435See [implementation examples](references/implementation.md) for nested route navigation and router36configuration patterns.3738## Reference & Examples3940For full Router configuration and Auth Guard implementation:41See [references/REFERENCE.md](references/REFERENCE.md).4243## Anti-Patterns4445- ❌ `Navigator.pushNamed(context, '/orders/123')` — always use generated typed route classes (e.g.,46 `OrderDetailRoute(id: 123)`)47- ❌ Authenticated screen without an `AutoRouteGuard` — every protected route must declare a guard;48 don't rely on UI-level checks alone49- ❌ `context.router.push(…)` called from a BLoC or repository — navigation is a Presentation50 concern; emit a state and let the UI navigate5152## Related Topics5354go-router-navigation | layer-based-clean-architecture5556---57> Source: [li-lance/android-seraphim-framework](https://github.com/li-lance/android-seraphim-framework) — distributed by [TomeVault](https://tomevault.io).58<!-- tomevault:4.0:skill_md:2026-06-16 -->
Run npx skillmds@latest add tomevault-io/li-lance-android-seraphim-framework-flutter-auto-route-navig in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
AutoRoute Navigation It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.