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)

25 stars

Best use case

flutter-auto-route-navigation is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

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)

Teams using flutter-auto-route-navigation should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/flutter-auto-route-navigation/SKILL.md --create-dirs "https://raw.githubusercontent.com/ComeOnOliver/skillshub/main/skills/HoangNguyen0403/agent-skills-standard/flutter-auto-route-navigation/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/flutter-auto-route-navigation/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How flutter-auto-route-navigation Compares

Feature / Agentflutter-auto-route-navigationStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

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)

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# AutoRoute Navigation

## **Priority: P1 (HIGH)**

Type-safe routing system with code generation using `auto_route`.

## Structure

```text
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 `_$AppRouter` and annotate with `@AutoRouterConfig`.
- **Typed Navigation**: Use generated route classes (e.g., `HomeRoute()`). Never use strings.
- **Nested Routes & Tabs**: Use `children` in `AutoRoute` for tabs. When navigating to a route with nested tabs, use the `children` parameter to define the initial active sub-route (e.g., `context.navigateTo(OrdersTabRoute(children: [ViewByOrdersPageRoute()]))`).
- **Guards**: Implement `AutoRouteGuard` for authentication/authorization logic.

- **Parameters**: Constructors of `@RoutePage` widgets automatically become route parameters.
- **Declarative**: Prefer `context.pushRoute()` or `context.replaceRoute()`.

## Reference & Examples

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

## Anti-Patterns

- ❌ `Navigator.pushNamed(context, '/orders/123')` — always use generated typed route classes (e.g., `OrderDetailRoute(id: 123)`)
- ❌ Authenticated screen without an `AutoRouteGuard` — every protected route must declare a guard; don't rely on UI-level checks alone
- ❌ `context.router.push(…)` called from a BLoC or repository — navigation is a Presentation concern; emit a state and let the UI navigate

## Related Topics

go-router-navigation | layer-based-clean-architecture

Related Skills

managing-autonomous-development

25
from ComeOnOliver/skillshub

Enables Claude to manage Sugar's autonomous development workflows. It allows Claude to create tasks, view the status of the system, review pending tasks, and start autonomous execution mode. Use this skill when the user asks to create a new development task using `/sugar-task`, check the system status with `/sugar-status`, review pending tasks via `/sugar-review`, or initiate autonomous development using `/sugar-run`. It provides a comprehensive interface for interacting with the Sugar autonomous development system.

route53-record-manager

25
from ComeOnOliver/skillshub

Route53 Record Manager - Auto-activating skill for AWS Skills. Triggers on: route53 record manager, route53 record manager Part of the AWS Skills skill category.

preprocessing-data-with-automated-pipelines

25
from ComeOnOliver/skillshub

Process automate data cleaning, transformation, and validation for ML tasks. Use when requesting "preprocess data", "clean data", "ETL pipeline", or "data transformation". Trigger with relevant phrases based on skill purpose.

automating-mobile-app-testing

25
from ComeOnOliver/skillshub

This skill enables automated testing of mobile applications on iOS and Android platforms using frameworks like Appium, Detox, XCUITest, and Espresso. It generates end-to-end tests, sets up page object models, and handles platform-specific elements. Use this skill when the user requests mobile app testing, test automation for iOS or Android, or needs assistance with setting up device farms and simulators. The skill is triggered by terms like "mobile testing", "appium", "detox", "xcuitest", "espresso", "android test", "ios test".

keyboard-navigation-tester

25
from ComeOnOliver/skillshub

Keyboard Navigation Tester - Auto-activating skill for Frontend Development. Triggers on: keyboard navigation tester, keyboard navigation tester Part of the Frontend Development skill category.

google-sheets-automation

25
from ComeOnOliver/skillshub

Google Sheets Automation - Auto-activating skill for Business Automation. Triggers on: google sheets automation, google sheets automation Part of the Business Automation skill category.

fastapi-router-creator

25
from ComeOnOliver/skillshub

Fastapi Router Creator - Auto-activating skill for Backend Development. Triggers on: fastapi router creator, fastapi router creator Part of the Backend Development skill category.

express-route-generator

25
from ComeOnOliver/skillshub

Express Route Generator - Auto-activating skill for Backend Development. Triggers on: express route generator, express route generator Part of the Backend Development skill category.

automating-database-backups

25
from ComeOnOliver/skillshub

This skill automates database backups using the database-backup-automator plugin. It creates scripts for scheduled backups, compression, encryption, and restore procedures across PostgreSQL, MySQL, MongoDB, and SQLite. Use this when the user requests database backup automation, disaster recovery planning, setting up backup schedules, or creating restore procedures. The skill is triggered by phrases like "create database backup", "automate database backups", "setup backup schedule", or "generate restore procedure".

configuring-auto-scaling-policies

25
from ComeOnOliver/skillshub

Configure use when you need to work with auto-scaling. This skill provides auto-scaling configuration with comprehensive guidance and automation. Trigger with phrases like "configure auto-scaling", "set up elastic scaling", or "implement scaling".

building-automl-pipelines

25
from ComeOnOliver/skillshub

Build automated machine learning pipelines with feature engineering, model selection, and hyperparameter tuning. Use when automating ML workflows from data preparation through model deployment. Trigger with phrases like "build automl pipeline", "automate ml workflow", or "create automated training pipeline".

automating-api-testing

25
from ComeOnOliver/skillshub

This skill automates API endpoint testing, including request generation, validation, and comprehensive test coverage for REST and GraphQL APIs. It is used when the user requests API testing, contract testing, or validation against OpenAPI specifications. The skill analyzes API endpoints and generates test suites covering CRUD operations, authentication flows, and security aspects. It also validates response status codes, headers, and body structure. Use this skill when the user mentions "API testing", "REST API tests", "GraphQL API tests", "contract tests", or "OpenAPI validation".