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
583200 skills21 agents33 commands1 MCP

Claude Code

$ npx -y skills add hoangnguyen0403/agent-skills-standard --skill flutter-auto-route-navigation --agent claude-code

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](../flutter-layer-based-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
@hoangnguyen0403
Ships withagent-skills-standard

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

583200 skills21 agents1 MCP
Get the whole plugin

Stars on GitHub

Momentum

stars in total
583
Star history of hoangnguyen0403/agent-skills-standard on GitHub, a chart by star-history.com

Other skills on agent-skills-standard.

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills10d309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc12d293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react1d252k
@facebook@facebookInstall Skill

Questions about flutter-auto-route-navigation.

Which coding agents can use flutter-auto-route-navigation?
flutter-auto-route-navigation installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.