Skip to content
Development
Skill

/flutter-auto-route-navigation

Implement typed routing, nested routes, and auth guards using auto_route in Flutter. Use when the task explicitly uses auto_route or its generated router; defer generic deep-link setup and other routing libraries.

From plugin
agent-skills-standard
538200 skills1 MCP
Install
$ npx -y skills add hoangnguyen0403/agent-skills-standard --skill flutter-auto-route-navigation --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/flutter-auto-route-navigation

Context preview

The summary Claude sees to decide when to auto-load this skill.

Implement typed routing, nested routes, and auth guards using auto_route in Flutter. Use when the task explicitly uses auto_route or its generated router; defer generic deep-link setup and other routing libraries.

SKILL.md

flutter-auto-route-navigation.SKILL.md
name: flutter-auto-route-navigation
description: Implement typed routing, nested routes, and auth guards using auto_route in Flutter. Use when the task explicitly uses auto_route or its generated router; defer generic deep-link setup and other routing libraries.
metadata:
  triggers:
    files:
    - '**/router.dart'
    - '**/app_router.dart'
    keywords:
    - AutoRoute
    - AutoRouter
    - router
    - guards
    - navigate
    - push

AutoRoute Navigation

**Priority: P1 (HIGH)**

Structure

core/router/
├── app_router.dart       # Router configuration
└── app_router.gr.dart    # Generated routes

Implementation Workflow

1. **Annotate pages** — Mark all screen/page widgets with `@RoutePage()`. 2. **Configure router** — Extend `_$AppRouter` and annotate with `@AutoRouterConfig`. 3. **Navigate with types** — Use generated route classes (e.g., `HomeRoute()`). Never use strings. 4. **Add guards** — Implement `AutoRouteGuard` for authentication/authorization logic. 5. **Handle parameters** — Constructors of `@RoutePage` widgets automatically become route parameters. 6. **Prefer declarative calls** — Use `context.pushRoute()` or `context.replaceRoute()`.

Nested Routes & Tabs

Use `children` in `AutoRoute` for tabs. Pass `children` parameter to define initial active sub-route.

See [implementation examples](references/implementation.md) for nested route navigation and router configuration patterns.

Reference & Examples

For full Router configuration and Auth Guard implementation: See [references/REFERENCE.md](references/REFERENCE.md).

Anti-Patterns

  • **No string-based navigation**: Use generated typed route classes (e.g., `OrderDetailRoute(id: 123)`).
  • **No protected screen without AutoRouteGuard**: Every protected route must declare guard; don't rely on UI-level checks.
  • **No navigation calls from BLoC**: Emit state and let Presentation layer navigate.

References

  • [go-router-navigation](../flutter-navigation/SKILL.md) | [layer-based-clean-architecture](../../common/common-clean-architecture/SKILL.md)

Canonical response anchors

When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:

  • Use generated
  • Additional task-grounded exact anchors: generated typed
Read more
Ships withagent-skills-standard

The portable SDLC standards layer for AI coding agents. Sync once, then work in your own runtime.

Get the whole plugin

Other skills on agent-skills-standard.