/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 skill from ui-craft.
shell
$ npx -y skills add educlopez/ui-craft --skill adapt --agent claude-codeInstalls just this skill. Get the whole plugin for auto-invocation.
How it fires
How this skill 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
The summary Claude sees to decide when to auto-load this skill.
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
Stars209
Forks9
LanguageGo
LicenseMIT
Ships with ui-craft
SKILL.md
adapt.SKILL.md
--- 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." --- <!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. --> **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:** 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).
