Skip to content
cccskills
FreePublished on GitHub

mobile-navigation

Use this skill when changing routes, tabs, guards, back-button behavior, or any navigation flow including notification-tap navigation.

The English summary is being prepared. Showing the original description.

See how to install

Files included (1)

  • SKILL.md1.7 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

mobile-navigation — Canonical Skill

Purpose

Preserve the verified @ionic/vue-router navigation model and back-button behavior.

When to use

Routes, tabs, guards, params, redirects, modals-as-pages, back-button, or notification/deep-link entry navigation.

Required reading

  • skills/mobile/NAVIGATION.md
  • docs/agent/MOBILE_ARCHITECTURE.md (router flow)

Relevant project locations

  • src/router/index.ts, src/App.vue, src/pages/tabs/index.vue
  • src/composables/useBase.ts (appNavigateTo, getCurrentPath)

Mandatory rules

  1. Guard: only meta.noRequireAuth === true bypasses auth (router/index.ts).
  2. Single useBackButton(-1, …) in App.vue — never add competing handlers.
  3. Tabs are children of /tabs/ (home/chat/other); keep nesting consistent.
  4. Route navigation through the guard. Several links point at routes that do not exist (/post/view/:id, /user/view/:id, /notifications, /hashtag/*, menu /permission /role /user /chats /feed — KNOWN_ISSUES #23); they fall to the catch-all 404. Add the route before relying on a link.

Implementation workflow

  1. Trace the affected route chain + guard outcome.
  2. Test forward, back, guard-redirect, and tab-switch paths.
  3. Confirm back-button priority/cleanup; no duplicate listeners.
  4. Verify per mobile-testing, including lifecycle on cached pages.

Verification

Route/guard unit checks + manual navigation matrix on web; Android back-button only verified on device/emulator.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Use this skill when adding or changing REST API calls, HTTP client config, error handling, uploads/downloads, or network behavior.

The English summary is being prepared. Showing the original description.

bekaku/vue-ionic-example-app6Updated Oct 5, 2026

Use this skill when working on login, logout, session restore, tokens, route guards, or any authentication and authorization behavior.

The English summary is being prepared. Showing the original description.

bekaku/vue-ionic-example-app6Updated Oct 5, 2026

Use this skill when building, syncing Capacitor, or preparing Android/iOS releases and environment configuration.

The English summary is being prepared. Showing the original description.

bekaku/vue-ionic-example-app6Updated Oct 5, 2026

Use this skill when creating, modifying, or debugging Ionic Vue components, pages, forms, dialogs, or theme/safe-area UI behavior.

The English summary is being prepared. Showing the original description.

bekaku/vue-ionic-example-app6Updated Oct 5, 2026

Use this skill for any Ionic Vue + Capacitor mobile work: Vue architecture, Composition API, TypeScript, state, env config, shared conventions. Required for every implementation task alongside mobile-testing.

The English summary is being prepared. Showing the original description.

bekaku/vue-ionic-example-app6Updated Oct 5, 2026

Use this skill when handling inbound URLs, custom schemes, app links, universal links, or URL-bearing notification payloads.

The English summary is being prepared. Showing the original description.

bekaku/vue-ionic-example-app6Updated Oct 5, 2026

See all skills by bekaku

Report a problem with this skill