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