SuperAPI AI 工具集

mobile-ux-optimizer

前端与建站

查看项目

更新于 10-15 20:30

技能介绍

用途:该技能用于构建触控优先、性能良好的移动端体验,处理视口、响应式布局与移动端交互问题。适用场景包括视口问题(100vh 问题、安全区域、刘海屏)、触控目标尺寸与间距、移动导航模式(底部导航、抽屉、汉堡菜单)、滑动手势与下拉刷新、响应式断点策略以及移动端性能优化。不适用于原生应用开发、仅桌面端功能、通用 CSS/Tailwind 问题以及 PWA 安装与 Service Worker。

主要能力:强调移动优先(从小到大构建)而非桌面优先缩放;触控目标遵循 44×44 点最小尺寸(Apple HIG)或 48×48dp(Material);视口处理推荐使用 100dvh 替代 100vh,并通过 env(safe-area-inset-*) 处理刘海与 Home 指示条,需配合 viewport meta 的 viewport-fit=cover;提供底部导航、滑出抽屉等移动导航实现思路;提供 useSwipe、usePullToRefresh 等手势 Hook;性能方面涵盖图片优化、动态导入减小包体、使用骨架屏而非加载转圈;响应式方面给出 Tailwind 断点策略与容器查询用法。

使用方式:作为技能在相关开发流程中调用,按需参考其 references 目录下的 keyboard-handling.md、animations.md、accessibility.md 等详细指南。测试建议使用 Chrome DevTools 移动模拟并节流网络/CPU,必要时通过 npx localtunnel --port 3000 或 ngrok http 3000 暴露本地服务进行真机测试。

限制:资料未提供该技能的安装命令、收费方式、支持平台或具体效果数据,暂未提供。