mcpField
M
mobile-nav-plan

mobile-nav-plan

github.com/draftbit设计与 UI966 次安装17 周前更新
代码仓库

关于 mobile-nav-plan

mobile-nav-plan 是用于规划移动应用导航的技能,可生成与 Expo Router `app/` 目录对应的路由树。它专注于信息架构,不编写屏幕或组件代码。

主要功能

  1. 01规划路由树
  2. 02选择屏幕容器类型
  3. 03规划深链与返回行为
  4. 04对比现有路由
  5. 05检查导航规则

适用场景

  1. 01规划新应用的导航
  2. 02提出现有路由树的调整方案
  3. 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 前,请完整阅读这两份文件。

流程

  1. 检查技术栈。 对于现有项目,读取 package.json / app.json / 当前的 app/(或导航器)树,以及 MOBILE-DESIGN.md(如果存在)。对于从零开始的对话,跳到第 2 步。
  2. 了解 App 的要点。 App 类型、受众、目标平台 + 级别、平台取向(一句话——完整的 App Read 由 mobile-taste 负责)。如果 App 类型确实存在歧义,只问一个问题。
  3. 列出待完成任务。 在选择容器之前,列出用户反复访问的目的地,以及创建/编辑任务。标签页应从此列表得出,不能套用 Home/Search/+/Alerts/Profile 模板(线索 #24)。
  4. 对每个屏幕运行决策树(navigation.md §2):标签页根屏幕 → 推入式导航 → 模态框 → 底部抽屉 → 全屏模态框,匹配第一项即停止。
  5. 按规范格式生成 Nav Read(navigation.md §1):平台、标签页、带容器注释的路由树、入口、抽屉(或“无”)、深层链接、Android 返回方案、最大点击次数。
  6. 说明有争议的决策——分别用一句话说明:标签页数量、FAB 决策(是否设置;若 App 有创建操作,还要说明为何没有 FAB)、任何全屏模态框、任何 BackHandler 例外,以及每个采用抽屉而非模态框的屏幕。
  7. 对照机械检查清单进行自检(navigation.md §4)。报告计划中偏离的规则及原因。
  8. 持久化。 提议将 Nav Read 写入 MOBILE-DESIGN.md(创建或更新 ## Nav Read 部分;如果该部分已存在,报告变更)。对于现有 App,还需输出当前路由树与建议路由树之间的 DIFF,并标出所有涉及“绝不可静默更改”清单的变更(../_shared/references/redesign-protocol.md):路由名称、深层链接、标签页顺序。

本技能必须遵守的规则

  • 重构现有 App 的导航属于提案——须经批准后,才能由 mobile-redesign-app 实施。
  • 不提供屏幕模型图,不编写组件代码。唯一产物是 Nav Read(如果用户要求,也可附带空路由文件框架:_layout.tsx 文件和与路由树对应的空屏幕,文件内不写任何内容)。
  • 每项容器选择都要引用决策树步骤。“感觉合适”不算理由。

评论

支持 Markdown