mcpField
T
thumb-first

thumb-first

github.com/kylezantos设计与 UI1637 次安装22 周前更新
代码仓库

关于 thumb-first

thumb-first 是移动端评审套件的协调技能,面向需要同时检查设计判断与平台技术问题的评审流程。它调用两个独立技能并合并结果,明确区分主观设计意见和客观缺陷。

主要功能

  1. 01协调设计与平台评审
  2. 02支持完整或单项评审模式
  3. 03识别 Web/PWA 与原生项目
  4. 04合并并区分两类发现
  5. 05按影响与优先级排列修复项

适用场景

  1. 01评审移动端页面设计与实现
  2. 02分别执行设计或平台技术审查
  3. 03汇总截图、网址或代码的评审发现
  4. 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合并报告结构——两种不同的发现类别 + 组合修复顺序编写报告时

评论

支持 Markdown