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