关于 adapt
adapt 是 ui-craft 的响应式设计子技能，面向调整界面以适配不同设备的开发者。它以移动端优先，提供布局、触控和导航检查清单，并要求直接修改代码。
主要功能
- 01移动端优先的适配流程
- 02断点与容器查询建议
- 03触控目标和安全区域检查
- 04排查小屏横向滚动
- 05导航与图片适配规则
适用场景
- 01将现有界面适配到手机与平板
- 02检查触控区域和设备安全边距
- 03调整侧栏及主内容区的响应布局
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/adapt确认已加载。
详细介绍
上下文： 此子技能是更全面的 ui-craft 技能的一个视角。如果也安装了 ui-craft 技能，请先阅读其 SKILL.md，了解 Discovery + Anti-Slop + Craft Test，然后再应用以下特定视角。
调整 $ARGUMENTS 处的 UI，使其适配不同设备。加载 ui-craft 技能并阅读 references/responsive.md。
从移动端开始设计。不要缩小桌面版；要从移动版逐步扩展。
检查清单：
- 断点 — 使用项目现有的系统（Tailwind：
sm md lg xl；CSS：组件优先使用容器查询，而非媒体查询）。不要使用随意设定的宽度。 - 触控 — 点击目标 ≥ 44×44px（
min-h-11 min-w-11）。触控区域不得重叠。在交互元素上设置touch-action: manipulation。 - 安全区域 — 在固定页眉／页脚／悬浮操作按钮上使用
padding-top: env(safe-area-inset-top)等设置。检查 iOS 刘海屏和 Android 手势条。 - 不得出现水平滚动，即使在 320px 宽度下也是如此。使用开发者工具的设备模式进行测试。
- 流式字体 — 对需要缩放的正文使用
clamp(1rem, 0.9rem + 0.5vw, 1.125rem)；小型 UI 文字（标签、说明文字）使用固定 px 值。 - 容器查询 — 对组件级响应式布局，优先使用
@container，而非视口媒体查询。位于侧边栏和主内容区的组件，在相同视口宽度下表现可能不同。 - 无悬停设备 — 每种悬停交互都必须有非悬停设备可用的替代方式。使用
@media (hover: hover)限定仅适用于桌面端的效果。 - 密度随视口变化 — 根据不同断点调整
VISUAL_DENSITY：VISUAL_DENSITY ≤ 3→ 即使在桌面宽度下，也使用更少的列和更宽的间距。VISUAL_DENSITY 8+→ 保持仪表盘密度，同时仍要区分触控与悬停（移动端触控目标保持 ≥ 44px；悬停交互需由@media (hover: hover)控制）。- 无论参数值如何，移动端始终应倾向于单列和更宽的间距。
- 图片 — 设置
aspect-ratio；针对不同视口设置srcset+sizes；首屏以下的图片使用loading="lazy"；主视觉图片使用fetchpriority="high"。 - 导航模式 — 桌面端横向排列 → 移动端折叠（使用面板、抽屉或底部标签栏）。除非导航栏有 > 7 个顶级项目，否则桌面端绝不使用汉堡菜单。
输出： 直接编辑代码。打印变更的 Review Format 表格。标出任何因缺少更多信息而无法修复的响应式问题（缺少某个断点的设计、导航模式不明确）。
下一步： /audit — 根据无障碍性、性能和触控目标检查响应式调整（第 1 阶段）。
评论
支持 Markdown