adapt

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Context: this sub-skill is one lens of the broader

ui-craft

skill. If the

ui-craft

skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.

Adapt the UI at the target the user described across devices. Load the

ui-craft

skill and read

references/responsive.md

Work mobile-first. Don't shrink desktop; grow from mobile.

Checklist:

Breakpoints — use project's existing system (Tailwind:
```
sm md lg xl
```
; CSS: container queries preferred over media queries for components). No magic widths.
Touch — tap targets ≥ 44×44px (
```
min-h-11 min-w-11
```
). Touch zones don't overlap.
```
touch-action: manipulation
```
on interactive elements.
Safe areas —
```
padding-top: env(safe-area-inset-top)
```
etc. on fixed headers/footers/FAB. Check iOS notch and Android gesture bar.
No horizontal scroll at 320px. Test with devtools device mode.
Fluid type —
```
clamp(1rem, 0.9rem + 0.5vw, 1.125rem)
```
for body where scale matters; fixed px for small UI text (labels, captions).
Container queries — prefer
```
@container
```
over viewport media queries for component-level responsiveness. Components that live in sidebars and main content behave differently at the same viewport width.
Hover-less devices — every hover affordance has a non-hover equivalent.
```
@media (hover: hover)
```
to scope desktop-only effects.
Density shifts with viewport — honor
```
VISUAL_DENSITY
```
differently per breakpoint:
- ```
VISUAL_DENSITY ≤ 3
```
  → fewer columns and wider spacing even at desktop widths.
- ```
VISUAL_DENSITY 8+
```
  → honor dashboard density, but still respect touch/hover distinctions (touch targets stay ≥ 44px on mobile, hover affordances gated behind
```
@media (hover: hover)
```
  ).
- Mobile always trends toward 1 column and wider spacing regardless of the knob value.
Images —
```
aspect-ratio
```
set;
```
srcset
```
+
```
sizes
```
for different viewports;
```
loading="lazy"
```
below the fold;
```
fetchpriority="high"
```
on hero.
Nav pattern — desktop horizontal → mobile collapses (sheet, drawer, or bottom tabs). Never a hamburger on desktop unless the nav has > 7 top-level items.

Output: edit code directly. Print the Review Format table of changes. Flag any responsive bugs you can't fix without more info (missing design for a breakpoint, unclear nav pattern).

背景说明：此子技能是更广泛的

ui-craft

技能的一个分支。如果同时安装了

ui-craft

技能，请先阅读其SKILL.md中的发现规则、防冗余规则和工艺测试要求，再应用以下特定规则。

根据用户描述的目标，在不同设备上适配UI。加载

ui-craft

技能并阅读

references/responsive.md

文档。

采用移动端优先的工作方式。不要从桌面端缩小适配，而要从移动端逐步扩展。

检查清单：

断点设置 — 使用项目现有的系统（Tailwind：
```
sm md lg xl
```
；CSS：组件优先使用容器查询而非媒体查询）。禁止使用任意的固定宽度值。
触控适配 — 点击目标尺寸≥44×44px（对应
```
min-h-11 min-w-11
```
）。触控区域不得重叠。在交互元素上设置
```
touch-action: manipulation
```
。
安全区域适配 — 在固定头部、底部导航、悬浮操作按钮（FAB）上设置
```
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个，否则桌面端绝不使用汉堡菜单。

输出要求：直接编辑代码。打印变更的评审格式表格。标记任何因信息不足无法修复的响应式问题（如某个断点缺少设计稿、导航模式不明确等）。