关于 mobile-nav-plan
mobile-nav-plan 是用于规划移动应用导航的技能,可生成与 Expo Router `app/` 目录对应的路由树。它专注于信息架构,不编写屏幕或组件代码。
主要功能
- 01规划路由树
- 02选择屏幕容器类型
- 03规划深链与返回行为
- 04对比现有路由
- 05检查导航规则
适用场景
- 01规划新应用的导航
- 02提出现有路由树的调整方案
- 03记录标签页、弹层和入口
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ draftbit/ mobile-taste-skill --skill mobile-nav-plan安装后在 Claude Code 中输入/mobile-nav-plan确认已加载。
详细介绍
mobile-nav-plan:只负责导航架构
导航是信息架构。本技能会生成一份 Nav Read——一棵已确定的路由树,同时也是 Expo Router app/ 目录规划——然后到此为止。不编写屏幕代码。
方法见 ../_shared/references/navigation.md(容器决策树、Expo Router 约定、机械检查、三个完整示例)。引用编号的线索(#24 等)见 ../_shared/references/tells.md。生成 Nav Read 前,请完整阅读这两份文件。
流程
- 检查技术栈。 对于现有项目,读取
package.json/app.json/ 当前的app/(或导航器)树,以及MOBILE-DESIGN.md(如果存在)。对于从零开始的对话,跳到第 2 步。 - 了解 App 的要点。 App 类型、受众、目标平台 + 级别、平台取向(一句话——完整的 App Read 由 mobile-taste 负责)。如果 App 类型确实存在歧义,只问一个问题。
- 列出待完成任务。 在选择容器之前,列出用户反复访问的目的地,以及创建/编辑任务。标签页应从此列表得出,不能套用 Home/Search/+/Alerts/Profile 模板(线索 #24)。
- 对每个屏幕运行决策树(navigation.md §2):标签页根屏幕 → 推入式导航 → 模态框 → 底部抽屉 → 全屏模态框,匹配第一项即停止。
- 按规范格式生成 Nav Read(navigation.md §1):平台、标签页、带容器注释的路由树、入口、抽屉(或“无”)、深层链接、Android 返回方案、最大点击次数。
- 说明有争议的决策——分别用一句话说明:标签页数量、FAB 决策(是否设置;若 App 有创建操作,还要说明为何没有 FAB)、任何全屏模态框、任何 BackHandler 例外,以及每个采用抽屉而非模态框的屏幕。
- 对照机械检查清单进行自检(navigation.md §4)。报告计划中偏离的规则及原因。
- 持久化。 提议将 Nav Read 写入
MOBILE-DESIGN.md(创建或更新## Nav Read部分;如果该部分已存在,报告变更)。对于现有 App,还需输出当前路由树与建议路由树之间的 DIFF,并标出所有涉及“绝不可静默更改”清单的变更(../_shared/references/redesign-protocol.md):路由名称、深层链接、标签页顺序。
本技能必须遵守的规则
- 重构现有 App 的导航属于提案——须经批准后,才能由 mobile-redesign-app 实施。
- 不提供屏幕模型图,不编写组件代码。唯一产物是 Nav Read(如果用户要求,也可附带空路由文件框架:
_layout.tsx文件和与路由树对应的空屏幕,文件内不写任何内容)。 - 每项容器选择都要引用决策树步骤。“感觉合适”不算理由。
评论
支持 Markdown