Command
/adapt
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
One command from ui-craft.
shell
$ npx -y skills add educlopez/ui-craft --agent claude-codeShips with ui-craft. Installing the plugin gets this command.
How it fires
How this command gets triggered: by you, by Claude, or both.
- Fires itselfClaude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/adapt
Context preview
What this command does when you run it.
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
Stats
Stars208
Forks9
LanguageGo
LicenseMIT
Ships with ui-craft
Command definition
adapt.md
--- 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". argument-hint: "[file or component path]" --- Adapt the UI at `$ARGUMENTS` across devices. Load the `ui-craft` skill and read `references/responsive.md`. **Work mobile-first. Don't shrink desktop; grow from mobile.** **Checklist:** 1. **Breakpoints** — use project's existing system (Tailwind: `sm md lg xl`; CSS: container queries preferred over media queries for components). No magic widths. 2. **Touch** — tap targets ≥ 44×44px (`min-h-11 min-w-11`). Touch zones don't overlap. `touch-action: manipulation` on interactive elements. 3. **Safe areas** — `padding-top: env(safe-area-inset-top)` etc. on fixed headers/footers/FAB. Check iOS notch and Android gesture bar. 4. **No horizontal scroll** at 320px. Test with devtools device mode. 5. **Fluid type** — `clamp(1rem, 0.9rem + 0.5vw, 1.125rem)` for body where scale matters; fixed px for small UI text (labels, captions). 6. **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. 7. **Hover-less devices** — every hover affordance has a non-hover equivalent. `@media (hover: hover)` to scope desktop-only effects. 8. **Density shifts with viewport** — honor `VISUAL_DENSITY` differently per breakpoint: - `VISUAL_DENSITY ≤ 3` → fewer columns and wider spacing even at desktop widths.
