1---
  2name: adapt
  3description: "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility."
  4argument-hint: "[target] [context (mobile, tablet, print...)]"
  5user-invocable: true
  6---
  7
  8Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.
  9
 10## MANDATORY PREPARATION
 11
 12Invoke {{command_prefix}}impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run {{command_prefix}}impeccable teach first. Additionally gather: target platforms/devices and usage contexts.
 13
 14---
 15
 16## Assess Adaptation Challenge
 17
 18Understand what needs adaptation and why:
 19
 201. **Identify the source context**:
 21   - What was it designed for originally? (Desktop web? Mobile app?)
 22   - What assumptions were made? (Large screen? Mouse input? Fast connection?)
 23   - What works well in current context?
 24
 252. **Understand target context**:
 26   - **Device**: Mobile, tablet, desktop, TV, watch, print?
 27   - **Input method**: Touch, mouse, keyboard, voice, gamepad?
 28   - **Screen constraints**: Size, resolution, orientation?
 29   - **Connection**: Fast wifi, slow 3G, offline?
 30   - **Usage context**: On-the-go vs desk, quick glance vs focused reading?
 31   - **User expectations**: What do users expect on this platform?
 32
 333. **Identify adaptation challenges**:
 34   - What won't fit? (Content, navigation, features)
 35   - What won't work? (Hover states on touch, tiny touch targets)
 36   - What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop)
 37
 38**CRITICAL**: Adaptation is not just scaling - it's rethinking the experience for the new context.
 39
 40## Plan Adaptation Strategy
 41
 42Create context-appropriate strategy:
 43
 44### Mobile Adaptation (Desktop → Mobile)
 45
 46**Layout Strategy**:
 47- Single column instead of multi-column
 48- Vertical stacking instead of side-by-side
 49- Full-width components instead of fixed widths
 50- Bottom navigation instead of top/side navigation
 51
 52**Interaction Strategy**:
 53- Touch targets 44x44px minimum (not hover-dependent)
 54- Swipe gestures where appropriate (lists, carousels)
 55- Bottom sheets instead of dropdowns
 56- Thumbs-first design (controls within thumb reach)
 57- Larger tap areas with more spacing
 58
 59**Content Strategy**:
 60- Progressive disclosure (don't show everything at once)
 61- Prioritize primary content (secondary content in tabs/accordions)
 62- Shorter text (more concise)
 63- Larger text (16px minimum)
 64
 65**Navigation Strategy**:
 66- Hamburger menu or bottom navigation
 67- Reduce navigation complexity
 68- Sticky headers for context
 69- Back button in navigation flow
 70
 71### Tablet Adaptation (Hybrid Approach)
 72
 73**Layout Strategy**:
 74- Two-column layouts (not single or three-column)
 75- Side panels for secondary content
 76- Master-detail views (list + detail)
 77- Adaptive based on orientation (portrait vs landscape)
 78
 79**Interaction Strategy**:
 80- Support both touch and pointer
 81- Touch targets 44x44px but allow denser layouts than phone
 82- Side navigation drawers
 83- Multi-column forms where appropriate
 84
 85### Desktop Adaptation (Mobile → Desktop)
 86
 87**Layout Strategy**:
 88- Multi-column layouts (use horizontal space)
 89- Side navigation always visible
 90- Multiple information panels simultaneously
 91- Fixed widths with max-width constraints (don't stretch to 4K)
 92
 93**Interaction Strategy**:
 94- Hover states for additional information
 95- Keyboard shortcuts
 96- Right-click context menus
 97- Drag and drop where helpful
 98- Multi-select with Shift/Cmd
 99
100**Content Strategy**:
101- Show more information upfront (less progressive disclosure)
102- Data tables with many columns
103- Richer visualizations
104- More detailed descriptions
105
106### Print Adaptation (Screen → Print)
107
108**Layout Strategy**:
109- Page breaks at logical points
110- Remove navigation, footer, interactive elements
111- Black and white (or limited color)
112- Proper margins for binding
113
114**Content Strategy**:
115- Expand shortened content (show full URLs, hidden sections)
116- Add page numbers, headers, footers
117- Include metadata (print date, page title)
118- Convert charts to print-friendly versions
119
120### Email Adaptation (Web → Email)
121
122**Layout Strategy**:
123- Narrow width (600px max)
124- Single column only
125- Inline CSS (no external stylesheets)
126- Table-based layouts (for email client compatibility)
127
128**Interaction Strategy**:
129- Large, obvious CTAs (buttons not text links)
130- No hover states (not reliable)
131- Deep links to web app for complex interactions
132
133## Implement Adaptations
134
135Apply changes systematically:
136
137### Responsive Breakpoints
138
139Choose appropriate breakpoints:
140- Mobile: 320px-767px
141- Tablet: 768px-1023px
142- Desktop: 1024px+
143- Or content-driven breakpoints (where design breaks)
144
145### Layout Adaptation Techniques
146
147- **CSS Grid/Flexbox**: Reflow layouts automatically
148- **Container Queries**: Adapt based on container, not viewport
149- **`clamp()`**: Fluid sizing between min and max
150- **Media queries**: Different styles for different contexts
151- **Display properties**: Show/hide elements per context
152
153### Touch Adaptation
154
155- Increase touch target sizes (44x44px minimum)
156- Add more spacing between interactive elements
157- Remove hover-dependent interactions
158- Add touch feedback (ripples, highlights)
159- Consider thumb zones (easier to reach bottom than top)
160
161### Content Adaptation
162
163- Use `display: none` sparingly (still downloads)
164- Progressive enhancement (core content first, enhancements on larger screens)
165- Lazy loading for off-screen content
166- Responsive images (`srcset`, `picture` element)
167
168### Navigation Adaptation
169
170- Transform complex nav to hamburger/drawer on mobile
171- Bottom nav bar for mobile apps
172- Persistent side navigation on desktop
173- Breadcrumbs on smaller screens for context
174
175**IMPORTANT**: Test on real devices, not just browser DevTools. Device emulation is helpful but not perfect.
176
177**NEVER**:
178- Hide core functionality on mobile (if it matters, make it work)
179- Assume desktop = powerful device (consider accessibility, older machines)
180- Use different information architecture across contexts (confusing)
181- Break user expectations for platform (mobile users expect mobile patterns)
182- Forget landscape orientation on mobile/tablet
183- Use generic breakpoints blindly (use content-driven breakpoints)
184- Ignore touch on desktop (many desktop devices have touch)
185
186## Verify Adaptations
187
188Test thoroughly across contexts:
189
190- **Real devices**: Test on actual phones, tablets, desktops
191- **Different orientations**: Portrait and landscape
192- **Different browsers**: Safari, Chrome, Firefox, Edge
193- **Different OS**: iOS, Android, Windows, macOS
194- **Different input methods**: Touch, mouse, keyboard
195- **Edge cases**: Very small screens (320px), very large screens (4K)
196- **Slow connections**: Test on throttled network
197
198Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly.
199