SuperAPI AI 工具集

thumb-first-platform

前端与建站

查看项目

更新于 10-15 23:48

技能介绍

用途:thumb-first-platform 是 thumb-first 套件中的技术验证层。设计层 thumb-first-design 判断移动设计应当如何(与平台无关),本技能则验证实现在真实设备上是否成立,输出带 file:line 与修复方案的客观缺陷清单,并按严重程度分级。通过 /thumb-first 可运行设计与平台联合评审;仅做技术检查时可单独使用本技能。

第 0 步先识别目标:Web/PWA(next.config.、vite.config.、index.html、manifest、service worker、Tailwind/CSS)是本技能主场;原生(react-native/expo、ios+android、xcodeproj/Package.swift/Swift、pubspec.yaml)不适用本技能的检查项,应交接给已安装的原生技能(如 React Native、Expo、SwiftUI、Flutter 相关技能),若无则明确说明边界,并建议使用 Xcode Instruments、Android Studio Profiler、Flipper 或 React Native 性能监视器。目标不明确时需询问审计对象。

主要能力与核心原则:iOS Safari 限制多,需真机测试(PWAs 需 Safari 安装、iOS 16.4+ 安装后才能推送、未安装应用 7 天存储上限、50MB 缓存、无后台同步、iOS 上 Chrome 也用 WebKit);视口单位应避免 100vh,静态元素用 svh、需要跟随缩放的元素才用 dvh;必须处理安全区域(viewport-fit=cover 与 env(safe-area-inset-*));触控目标不小于 44px(Apple HIG)或 48dp(Google);Chrome DevTools 模拟不可靠,需真机或 BrowserStack/Sauce Labs。

使用方式:先回答意图问题,再按匹配的工作流执行。audit/check/review 对应 workflows/audit-mobile-pwa.md;ios/safari/iphone 对应 fix-ios-issues.md;pwa/manifest/install 对应 setup-pwa.md;performance/lcp/cls 对应 optimize-performance.md;touch/gesture 读 references/touch-interactions.md;push/notification 读 push-notifications.md;test/debug 对应 test-mobile.md。含 100vh、notch、safe area 等具体问题时走 references/viewport-layout.md 等参考文件。经 /thumb-first 调用时只执行 audit 路径并合并进总报告,setup/push/perf 工作流仅直接调用时可用。每次改动后用 pnpm build、Lighthouse(Mobile + PWA)、真机 Safari Web Inspector 或 ngrok/localtunnel 验证,并按 Build / Lighthouse / iOS Safari 格式报告。参考资料包括 ios-safari-quirks、android-pwa、viewport-layout、pwa-manifest、service-workers、push-notifications、touch-interactions、performance、image-optimization、responsive-patterns、testing-debugging。限制:本技能仅深入覆盖 Web/PWA,原生平台需交接或转用原生工具;官方资料未提供收费与价格信息。