本文へ移動
cccskills
無料GitHub で公開

mobile-navigation

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

bekaku/vue-ionic-example-app
インストール方法を見る

含まれるファイル（1）

  • SKILL.md1.7 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

mobile-api

無料

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

日本語の概要は準備中です。原文の説明を表示しています。

bekaku/vue-ionic-example-app62026年10月5日 更新

mobile-auth

無料

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

日本語の概要は準備中です。原文の説明を表示しています。

bekaku/vue-ionic-example-app62026年10月5日 更新

mobile-build-release

無料

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

日本語の概要は準備中です。原文の説明を表示しています。

bekaku/vue-ionic-example-app62026年10月5日 更新

mobile-components

無料

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

日本語の概要は準備中です。原文の説明を表示しています。

bekaku/vue-ionic-example-app62026年10月5日 更新

mobile-core

無料

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.

日本語の概要は準備中です。原文の説明を表示しています。

bekaku/vue-ionic-example-app62026年10月5日 更新

mobile-deep-links

無料

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

日本語の概要は準備中です。原文の説明を表示しています。

bekaku/vue-ionic-example-app62026年10月5日 更新

bekaku のスキルをすべて見る

このスキルの問題を報告する