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