关于 thumb-first
thumb-first 是移动端评审套件的协调技能,面向需要同时检查设计判断与平台技术问题的评审流程。它调用两个独立技能并合并结果,明确区分主观设计意见和客观缺陷。
主要功能
- 01协调设计与平台评审
- 02支持完整或单项评审模式
- 03识别 Web/PWA 与原生项目
- 04合并并区分两类发现
- 05按影响与优先级排列修复项
适用场景
- 01评审移动端页面设计与实现
- 02分别执行设计或平台技术审查
- 03汇总截图、网址或代码的评审发现
- 04整理统一的修复优先顺序
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ kylezantos/ thumb-first --skill thumb-first安装后在 Claude Code 中输入/thumb-first确认已加载。
附带文件references/unified-report.mdworkflows/full-review.md
详细介绍
Thumb-First · 移动端评审(总入口)
Thumb-First 移动端套件的一站式入口。它协调两个独立维护的同级技能,并合并它们的输出:
| 层级 | 技能 | 解答的问题 | 输出 |
|---|---|---|---|
| 设计判断 | thumb-first-design | 这是合适的移动端设计吗?(与平台无关) | 按设计影响排序的取舍与观点 |
| 平台技术 | thumb-first-platform | 它是否针对设备正确构建?(深入 Web/PWA,原生交接) | 客观缺陷、P0–P3、文件:行号 |
这两个层级的有效期不同——设计判断具有持久性;平台细节会随着每次 OS/浏览器版本发布而过时——因此它们作为独立技能存在,并分别进行版本管理。这个总入口负责串联两者并协调结果。合并报告中清晰区分两类发现,正是这样做的全部意义:绝不能让观点看起来像缺陷,也不能让必须修复的问题看起来像偏好。
模式选择
从 $ARGUMENTS 检测模式,否则默认为完整评审。
| 模式 | 触发条件 | 运行内容 |
|---|---|---|
| 完整评审(默认) | “review”“audit”、直接调用,或任何同时涉及设计和技术的内容 | 两轮评审 → 合并报告 |
| 仅设计 | “design”“judgment”“patterns”“forks”“lenses” | 仅运行 thumb-first-design |
| 仅平台 | “platform”“technical”“PWA”“safe area”“viewport”“performance”“defects” | 仅运行 thumb-first-platform |
对于仅设计或仅平台模式,交由相应的同级技能处理后即停止——不要执行合并。
如果用户选择了评审,却没有提供评审对象,请先询问要评审什么——截图、线上 URL、代码还是描述——然后再进行分流。两轮评审都可以基于以上任一材料进行;只需要提供其中一种。
完整评审 — 编排流程
阅读 workflows/full-review.md 并遵照执行。流程如下:
步骤 0 · 仅检测一次目标类型
检查代码仓库,判断目标是 Web/PWA(next.config、vite、Web manifest、Service Worker)还是 原生(react-native/expo、app.json、ios/+android/、*.swift、pubspec.yaml);若无法确定,请提问。将判断结果传给两轮评审——平台评审会据此进行严格分支处理(参见 thumb-first-platform 步骤 0;原生项目会触发交接或明确说明限制,绝不会伪装成 Web 评审)。
步骤 1 · 设计评审
运行 thumb-first-design 的审计流程(../thumb-first-design/workflows/audit.md,加载 ../thumb-first-design/references/designer-lenses.md)。输出设计发现及静默确定的取舍。此层适用于所有目标。
步骤 2 · 平台评审
针对 Web/PWA 运行 thumb-first-platform 的审计流程(../thumb-first-platform/workflows/audit-mobile-pwa.md);针对原生项目,则采用其原生分支(交接/说明限制)。输出含文件:行号和 P0–P3 的客观缺陷。
步骤 1 和 2 相互独立——需要提速时,可将它们作为两个并行子 Agent 运行,然后再合并。在主上下文中顺序执行也适合规模较小的评审对象。
步骤 3 · 合并
根据 references/unified-report.md 合并为一份报告:
- 设计与判断 — 取舍和观点,标注“需要决策”,按用户影响排序。采用独立样式(琥珀色/中性色)。
- 平台缺陷 — 客观问题、P0–P3、文件:行号,标注“必须修复”。采用独立样式(红色严重程度等级)。
- 综合修复顺序 — 将两类问题交错编入一份优先级清单,让读者无论问题类别如何,都能看出应先处理什么。
以 ../thumb-first-design/references/report-template.html 为 HTML 基础(这是规范模板),并添加平台缺陷部分——不要另行设计模板。
此总入口不做什么
- 它不会自行包含设计或平台知识——这些内容由两个同级技能提供。此文件仅负责路由和合并。如果你想在这里添加设计师视角或 Safari 特有问题,应将其放到同级技能中。
- 它不会编写实现代码。设计发现会移交给
responsive-craft/ RN-Expo 技能;平台缺陷由thumb-first-platform的修复工作流解决。
套件地图
thumb-first/ ← this umbrella (routing + merge)
thumb-first-design/ ← design judgment (8 lenses, forks) — platform-agnostic
thumb-first-platform/ ← technical verification (web/PWA deep, native handoff)
参考与工作流索引
| 文件 | 内容 | 加载时机 |
|---|---|---|
| workflows/full-review.md | 两轮协同流程 + 合并步骤 | 执行完整审查时 |
| references/unified-report.md | 合并报告结构——两种不同的发现类别 + 组合修复顺序 | 编写报告时 |