| name | adapt |
| description | "Responsive layout pass covering breakpoints, touch targets, safe areas, and fluid type. Use when the UI has layout or touch issues on mobile/tablet, when adding a new screen that hasn't been tested across viewports, or when the user says "make it responsive" / "fix mobile layout". Invoke when the user asks for adapt on their UI, or mentions 'adapt' alongside design / UI / frontend work." |
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).
