> flutter-auto-route-navigation
Typed routing, nested routes, and guards using auto_route. Use when implementing typed navigation, nested routes, or route guards with auto_route in Flutter. (triggers: **/router.dart, **/app_router.dart, AutoRoute, AutoRouter, router, guards, navigate, push)
curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/flutter-auto-route-navigation?format=md"AutoRoute Navigation
Priority: P1 (HIGH)
Type-safe routing system with code generation using auto_route.
Structure
core/router/
├── app_router.dart # Router configuration
└── app_router.gr.dart # Generated routes
Implementation Guidelines
-
@RoutePage: Annotate all screen/page widgets with
@RoutePage(). -
Router Config: Extend
_$AppRouterand annotate with@AutoRouterConfig. -
Typed Navigation: Use generated route classes (e.g.,
HomeRoute()). Never use strings. -
Nested Routes & Tabs: Use
childreninAutoRoutefor tabs. When navigating to a route with nested tabs, use thechildrenparameter to define the initial active sub-route (e.g.,context.navigateTo(OrdersTabRoute(children: [ViewByOrdersPageRoute()]))). -
Guards: Implement
AutoRouteGuardfor authentication/authorization logic. -
Parameters: Constructors of
@RoutePagewidgets automatically become route parameters. -
Declarative: Prefer
context.pushRoute()orcontext.replaceRoute().
Reference & Examples
For full Router configuration and Auth Guard implementation: See references/REFERENCE.md.
Related Topics
go-router-navigation | layer-based-clean-architecture
🚫 Anti-Patterns
- Do NOT use standard patterns if specific project rules exist.
- Do NOT ignore error handling or edge cases.
> related_skills --same-repo
> typescript-tooling
Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)
> typescript-security
Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)
> typescript-language
Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)
> typescript-best-practices
Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)