Best practices for navigation and routing in Flutter using GoRouter, covering hierarchical route trees, type-safe @TypedGoRoute definitions, named navigation, redirects, and deep linking setup.

MITAuto-check passedMobile

Install Navigation

skills CLI
$ npx skills add VeryGoodOpenSource/vgv-ai-flutter-plugin --skill navigation -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install VeryGoodOpenSource/vgv-ai-flutter-plugin navigation --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/navigation .claude/skills/navigation && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
navigation
GitHub stars
169
Token cost
~1.6k tokens
SKILL.md length
587 words
Files
6 (incl. references)
Skills in repo
15
Repo updated
First seen
Licence
MIT

At a glance

Best practices for navigation and routing in Flutter using GoRouter, covering hierarchical route trees, type-safe @TypedGoRoute definitions, named navigation, redirects, and deep linking setup.

  • Works in 5 steps: Create the page widget (following the… → Define a GoRouteData class with… → Add it as a sub-route under the… → …
  • Reviewing routes
  • SKILL.md covers Core Standards, Route Organization, Type-Safe Routes and Navigation Methods, plus 5 more sections
  • Calls dart

What it does

Navigation is an agent skill from VeryGoodOpenSource/vgv-ai-flutter-plugin. Best practices for navigation and routing in Flutter using GoRouter, covering hierarchical route trees, type-safe @TypedGoRoute definitions, named navigation, redirects, and deep linking setup. Use when creating, modifying, or reviewing routes, deep links, redirects, or navigation logic that uses package:gorouter or package:gorouterbuilder, including widget tests that mock GoRouter or provide it through InheritedGoRouter. Also use for call-site navigation, however small: an onTap, button, or tap handler that…

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including reference files (for example `agents/openai.yaml`, `references/parameters.md` and `references/redirects.md`).

It sits in Mobile, covering Cross-platform mobile apps and Type safety. It works with Flutter. The repository describes itself as: AI plugin to enhance and accelerate Flutter & Dart development, built by Very Good Ventures. The licence is MIT.

When your agent uses it

  • Reviewing routes
  • Navigation logic that uses package:gorouter
  • Package:gorouterbuilder
  • Including widget tests that mock GoRouter

Example prompts

  • “/navigation”

Requirements

  • Pre-approved tools (allowed-tools): Read, Glob, Grep

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Create the page widget (following the Page/View pattern if using Bloc)
  2. Define a GoRouteData class with @TypedGoRoute annotation
  3. Add it as a sub-route under the appropriate parent route
  4. Run dart run build_runner build --delete-conflicting-outputs to regenerate route helpers
  5. Navigate using the generated type-safe route class

What it can do on your machine

Read from SKILL.md and the folder at commit 496a3c6. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Glob
    • Grep

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • dart

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Navigation loads about 1.6k tokens when it runs, and up to ~3k if it reads all its reference files. Until then it costs about 227 tokens; SKILL.md has 587 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~227
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from VeryGoodOpenSource/vgv-ai-flutter-plugin at commit 496a3c6, republished under its MIT licence (© VeryGoodOpenSource). 587 words, ~1,592 tokens.

Download SKILL.mdSave it as .claude/skills/navigation/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.
name
navigation
description
Best practices for navigation and routing in Flutter using GoRouter, covering hierarchical route trees, type-safe `@TypedGoRoute` definitions, named navigation, redirects, and deep linking setup. Use when creating, modifying, or reviewing routes, deep links, redirects, or navigation logic that uses package:go_router or package:go_router_builder, including widget tests that mock GoRouter or provide it through `InheritedGoRouter`. Also use for call-site navigation, however small: an `onTap`, button, or tap handler that takes the user from one screen to another, choosing between `context.go`, `goNamed`, `context.push`, `pushNamed`, or `pop`, navigating to a path such as `/products/p1`, passing data to a destination, or returning a result to the caller. A one-line navigation call is still navigation work. Route motion belongs to the animations skill, even inside a `GoRouteData` subclass.
allowed-tools
Read, Glob, Grep

Navigation

Routing and navigation best practices for Flutter applications using GoRouter, the Flutter team's recommended routing package built on the Navigator 2.0 API.

Core Standards

Apply these standards to all navigation work:

  • Use package:go_router for all navigation — never raw Navigator 2.0 or Navigator 1.0 push/pop
  • Use @TypedGoRoute annotations for type-safe routes — never raw string paths in route definitions
  • Prefer go() over push() — use push() only when expecting return data from the destination
  • Never use the extra parameter — it breaks deep linking and does not work on the web
  • Hierarchical sub-routes for proper back navigation — structure routes as parent-child trees, not flat lists
  • Hyphens for URL word separation — never underscores or camelCase in URL paths
  • Navigate by route name, not raw path strings — use named route navigation to decouple from path changes
  • Use BuildContext extensions for navigation — prefer context.goNamed() over GoRouter.of(context).goNamed()

Route Organization

Structure routes hierarchically with logical parent-child relationships. Sub-routes ensure the app bar back button displays correctly and URLs remain clean.

Hierarchical Structure (Preferred)
text
/flutter
  /flutter/news
  /flutter/chat
  /flutter/articles
    /flutter/articles?category=all
    /flutter/article/:id
/android
  /android/news
  /android/chat
Flat Structure (Avoid)
text
/flutter-news
/flutter-chat
/android-news
/android-chat

Hierarchical sub-routes produce proper backward navigation automatically — when a user is on /flutter/news, the back button navigates to /flutter.

Type-Safe Routes

Every route is a GoRouteData class carrying a @TypedGoRoute annotation — never a raw string path. Sub-routes nest inside the parent's routes: list so the hierarchy above is expressed in the type system, and package:go_router_builder generates the navigation helpers.

See references/typed-routes.md for basic routes, nested sub-routes, and shell routes.

Navigation Methods

go() vs push()
MethodURL UpdatesBack ButtonUse Case
go()YesApp barStandard navigation between screens
push()NoSystemWhen expecting return data from popped route
Using go() (Default)
dart
const CategoriesPageRoute(size: 'small', color: 'blue').go(context);

Using go() ensures the back button in the app's AppBar displays when the current route has a parent to navigate back to.

Using push() (Return Data Only)
dart
final result = await DialogPageRoute().push<String>(context);

Use push() only when a route must return data (e.g., a dialog collecting user input). On the web, push() does not update the address bar.

BuildContext Extensions

Always use extension methods for cleaner syntax:

dart
// Preferred
context.goNamed('flutterNews');

// Avoid
GoRouter.of(context).goNamed('flutterNews');
Show full SKILL.md (256 more words)Show less

Parameter Strategies

Use path parameters (:id) for resource identification and query parameters (?category=all) for optional filtering. Never use extra — it breaks deep linking and does not work on the web.

See references/parameters.md for full examples of path parameters, query parameters, and why extra is prohibited.

Redirects

Redirects can be applied at the root router level (e.g., authentication guards) and at individual route levels (e.g., authorization guards). Parent redirects execute before child redirects.

See references/redirects.md for root-level and route-level redirect examples.

Testing

Mock GoRouter with package:mocktail and wrap widgets in InheritedGoRouter for widget tests. Test redirects by constructing a GoRouter with the target redirect logic and asserting the resulting page.

See references/testing.md for mocking GoRouter and testing redirect examples.

Common Patterns

Adding a New Route
  1. Create the page widget (following the Page/View pattern if using Bloc)
  2. Define a GoRouteData class with @TypedGoRoute annotation
  3. Add it as a sub-route under the appropriate parent route
  4. Run dart run build_runner build --delete-conflicting-outputs to regenerate route helpers
  5. Navigate using the generated type-safe route class
Deep Linking Setup
  1. Structure routes hierarchically with meaningful URL paths
  2. Use path parameters for resource identification
  3. Use query parameters for filtering — never extra
  4. Navigate by route name so path restructuring does not break links
  5. Test deep links by launching the app with the target URL

Additional Resources

© VeryGoodOpenSource, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 5 other files (references) in skills/navigation of VeryGoodOpenSource/vgv-ai-flutter-plugin.

  • SKILL.md
  • agents/openai.yaml
  • references/parameters.md
  • references/redirects.md
  • references/testing.md
  • references/typed-routes.md

Open the folder on GitHubat commit 496a3c6

Compare with similar skills

Navigation next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Navigation compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Navigation this skillVeryGoodOpenSource/vgv-ai-flutter-plugin169—~1.6kAutomated safety check: PassMIT
Flutter Retrofit NetworkingHoangNguyen0403/agent-skills-standard571—~561Automated safety check: PassMIT
Dart DriftMADTeacher/mad-agents-skills110—~1.2kAutomated safety check: PassMIT
Add Flutter Docusaurus Localematthiasn/lotti1.2k—~1.2kAutomated safety check: PassGPL-3.0
Tm Launcher DesignFar-Se/tabame372—~3.1kAutomated safety check: PassMIT
Mobile App UI Designceorkm/mobile-app-ui-design400—~2kAutomated safety check: PassNone

Similar skills

  • Flutter Retrofit Networking

    HoangNguyen0403/agent-skills-standard

    Build type-safe HTTP networking with Dio and Retrofit including auth interceptors in Flutter.

    571 GitHub stars~561 tokensUpdated yesterday
    MobileAuto-check passed
  • Dart Drift

    MADTeacher/mad-agents-skills

    Build, fix, audit, and migrate Drift persistence in Dart CLI, server-side, and non-Flutter desktop apps.

    110 GitHub stars~1.2k tokensUpdated 5 mo ago
    MobileAuto-check passed
  • Add, complete, or audit a locale across a Flutter application's ARB catalogs and a localized Docusaurus manual, including generated localization code, locale selectors, native platform declarations…

    1.2k GitHub stars~1.2k tokensUpdated yesterday
    MobileAuto-check passed
  • Tm Launcher Design

    Far-Se/tabame

    Create or revise Tabame's Flutter launcher designs: frames, search bars, result rows, palettes, typography, and action dialogs.

    372 GitHub stars~3.1k tokensUpdated yesterday
    MobileAuto-check passed
  • Mobile App UI Design

    ceorkm/mobile-app-ui-design

    Design high-quality mobile app UI/UX screens, flows, and components.

    400 GitHub stars~2k tokensUpdated 3 mo ago
    MobileAuto-check passed
  • Marionette Flutter Drive App

    leancodepl/marionette_mcp

    Set up and drive a running Flutter app (debug or profile) with Marionette — an AI agent's hands and eyes for the app.

    473 GitHub stars~11k tokensUpdated 3 days ago
    MobileAuto-check passed

More from VeryGoodOpenSource/vgv-ai-flutter-plugin

All 15 skills in this repo
  • Accessibility

    VeryGoodOpenSource/vgv-ai-flutter-plugin

    Audits or remediates Flutter widgets against WCAG 2.2 conformance levels A, AA, or AAA across iOS, Android, Web, macOS, Windows, and Linux, covering Semantics labels and screen reader output under…

    169 GitHub stars~4.2k tokensUpdated 2 days ago
    Auto-check passed
  • Animations

    VeryGoodOpenSource/vgv-ai-flutter-plugin

    Best practices for Flutter animations using the built-in animation framework, covering implicit animations, explicit AnimationController animations, page transitions, and Material 3 motion tokens.

    169 GitHub stars~3.5k tokensUpdated 2 days ago
    Auto-check passed
  • Bloc

    VeryGoodOpenSource/vgv-ai-flutter-plugin

    Best practices for Bloc state management in Flutter/Dart, covering Cubit versus Bloc, event and state naming, sealed classes with Equatable, the Page/View split with BlocProvider, BlocBuilder…

    169 GitHub stars~2k tokensUpdated 2 days ago
    Auto-check passed
  • Dart Flutter SDK Upgrade

    VeryGoodOpenSource/vgv-ai-flutter-plugin

    VGV-specific reference for bumping Dart and Flutter SDK constraints across packages, covering pubspec.yaml environment constraints, CI workflow Flutter versions, and SDK upgrade PR preparation.

    169 GitHub stars~2.6k tokensUpdated 2 days ago
    Auto-check: notes
  • Internationalization

    VeryGoodOpenSource/vgv-ai-flutter-plugin

    Best practices for internationalization (i18n) and localization (l10n) in Flutter, using the built-in flutterlocalizations and intl setup with ARB files as the single source of truth.

    169 GitHub stars~1.6k tokensUpdated 2 days ago
    Auto-check passed
  • Layered Architecture

    VeryGoodOpenSource/vgv-ai-flutter-plugin

    VGV layered monorepo architecture in Flutter: four layers Data, Repository, Business Logic, and Presentation, unidirectional dependency rules, and model transformation across layers.

    169 GitHub stars~4.6k tokensUpdated 2 days ago
    Auto-check passed

Works with

Categories

Questions about Navigation

What does Navigation do?

Best practices for navigation and routing in Flutter using GoRouter, covering hierarchical route trees, type-safe @TypedGoRoute definitions, named navigation, redirects, and deep linking setup. Navigation is an agent skill from VeryGoodOpenSource/vgv-ai-flutter-plugin. Best practices for navigation and routing in Flutter using GoRouter, covering hierarchical route trees, type-safe @TypedGoRoute definitions, named navigation, redirects, and deep linking setup.

When should I use Navigation?

Navigation fits situations like: reviewing routes; navigation logic that uses package:gorouter; package:gorouterbuilder; including widget tests that mock GoRouter.

How do I install Navigation in Claude Code?

Run `npx skills add VeryGoodOpenSource/vgv-ai-flutter-plugin --skill navigation -a claude-code`. Or copy the skill folder (skills/navigation in VeryGoodOpenSource/vgv-ai-flutter-plugin) into .claude/skills/navigation in your project. Claude Code loads it when a task matches its description.

How do I install Navigation in Codex?

Run `npx skills add VeryGoodOpenSource/vgv-ai-flutter-plugin --skill navigation -a codex`. Or copy the skill folder (skills/navigation in VeryGoodOpenSource/vgv-ai-flutter-plugin) into .agents/skills/navigation in your project. Codex loads it when a task matches its description.

Can I use Navigation in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add VeryGoodOpenSource/vgv-ai-flutter-plugin --skill navigation -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/navigation, .gemini/skills/navigation, .github/skills/navigation and .opencode/skills/navigation in your project.

What does Navigation need to run?

Going by SKILL.md and its folder, Navigation needs the command-line tools its instructions call (dart). Its frontmatter pre-approves these tools: Read, Glob, Grep.

Does Navigation access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Navigation safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Navigation use?

Navigation is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Navigation use?

About 1.6k tokens (SKILL.md is roughly 6.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.4k tokens, read only when the agent opens those files.

What are the alternatives to Navigation?

Skills that share tags, products or a category with Navigation: Flutter Retrofit Networking (HoangNguyen0403/agent-skills-standard, 571 stars), Dart Drift (MADTeacher/mad-agents-skills, 110 stars), Add Flutter Docusaurus Locale (matthiasn/lotti, 1.2k stars) and Tm Launcher Design (Far-Se/tabame, 372 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Navigation?

VeryGoodOpenSource (a GitHub organization) maintains it in VeryGoodOpenSource/vgv-ai-flutter-plugin, which has 169 GitHub stars. The repository holds 15 skills in this directory. The repository was last updated on October 6, 2026.

Source: VeryGoodOpenSource/vgv-ai-flutter-plugin on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.