1---
 2tagline: "Make designs work across screens, devices, and contexts without amputating features."
 3---
 4
 5## When to use it
 6
 7`/adapt` is for taking a design built for one context and making it work in another. Mobile from desktop, tablet from mobile, print from web, embedded from standalone, email from dashboard. Reach for it when the source design is solid but falls apart at other breakpoints, on touch, or in a different container.
 8
 9Not for building responsive from scratch. For that, start with `/impeccable` and shape the layout responsive-first. Adapt is for the "we never thought about mobile" backfill.
10
11## How it works
12
13The skill works through four dimensions of contextual fit:
14
151. **Breakpoints and fluid layout**: collapse multi-column to single, adjust clamp ranges, introduce new breakpoints where the design genuinely breaks.
162. **Touch targets**: minimum 44px hit areas, sufficient spacing between adjacent targets, larger tap zones than visual bounds where needed.
173. **Navigation patterns**: desktop sidebars become mobile bottom nav or slide-outs, dense toolbars collapse into menus, hover states get touch equivalents.
184. **Content priority**: decide what must be visible, what can collapse into disclosures, what can be removed entirely for that context.
19
20The non-negotiable rule: adapt, do not amputate. Critical functionality cannot disappear on mobile just because it is inconvenient. Find a way to fit it, redesign the interaction, or reconsider whether it was really critical on desktop.
21
22## Try it
23
24```
25/adapt the settings page for mobile
26```
27
28Expected changes:
29
30- Three-column grid becomes single column with section headers acting as sticky dividers
31- Sidebar nav moves to a horizontal scroller above the content
32- Toggles gain 8px vertical padding so they meet 44px touch targets
33- Inline help text moves to tap-to-reveal, not hover
34- The "Danger zone" section expands fully on mobile instead of collapsing, because it contains irreversible actions and we want users to see them clearly
35
36## Pitfalls
37
38- **Amputating features.** If the mobile version hides things the desktop version can do, that is a regression, not an adaptation. Fight for the feature.
39- **Treating mobile as "smaller desktop".** Mobile is a different context: thumbs, interruption, short sessions. Adapt to the context, not to the viewport width.
40- **Skipping `/harden` afterward.** Responsive layouts reveal edge cases. Run hardening after adapt to catch the ones that only show up at 320px.