Name: adapt
Author: itsaark

Prompt file imported from itsaark/lore (.codex/prompts/adapt.md). Copyright stays with the author.

description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments. argument-hint: [TARGET=] [CONTEXT=]

Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.

Assess Adaptation Challenge

Understand what needs adaptation and why:

Identify the source context:
- What was it designed for originally? (Desktop web? Mobile app?)
- What assumptions were made? (Large screen? Mouse input? Fast connection?)
- What works well in current context?
Understand target context:
- Device: Mobile, tablet, desktop, TV, watch, print?
- Input method: Touch, mouse, keyboard, voice, gamepad?
- Screen constraints: Size, resolution, orientation?
- Connection: Fast wifi, slow 3G, offline?
- Usage context: On-the-go vs desk, quick glance vs focused reading?
- User expectations: What do users expect on this platform?
Identify adaptation challenges:
- What won't fit? (Content, navigation, features)
- What won't work? (Hover states on touch, tiny touch targets)
- What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop)

CRITICAL: Adaptation is not just scaling - it's rethinking the experience for the new context.

Plan Adaptation Strategy

Create context-appropriate strategy:

Mobile Adaptation (Desktop → Mobile)

Layout Strategy:

Single column instead of multi-column
Vertical stacking instead of side-by-side
Full-width components instead of fixed widths
Bottom navigation instead of top/side navigation

Interaction Strategy:

Touch targets 44x44px minimum (not hover-dependent)
Swipe gestures where appropriate (lists, carousels)
Bottom sheets instead of dropdowns
Thumbs-first design (controls within thumb reach)
Larger tap areas with more spacing

Content Strategy:

Progressive disclosure (don't show everything at once)
Prioritize primary content (secondary content in tabs/accordions)
Shorter text (more concise)
Larger text (16px minimum)

Navigation Strategy:

Hamburger menu or bottom navigation
Reduce navigation complexity
Sticky headers for context
Back button in navigation flow

Tablet Adaptation (Hybrid Approach)

Layout Strategy:

Two-column layouts (not single or three-column)
Side panels for secondary content
Master-detail views (list + detail)
Adaptive based on orientation (portrait vs landscape)

Interaction Strategy:

Support both touch and pointer
Touch targets 44x44px but allow denser layouts than phone
Side navigation drawers
Multi-column forms where appropriate

Desktop Adaptation (Mobile → Desktop)

Layout Strategy:

Multi-column layouts (use horizontal space)
Side navigation always visible
Multiple information panels simultaneously
Fixed widths with max-width constraints (don't stretch to 4K)

Interaction Strategy:

Hover states for additional information
Keyboard shortcuts
Right-click context menus
Drag and drop where helpful
Multi-select with Shift/Cmd

Content Strategy:

Show more information upfront (less progressive disclosure)
Data tables with many columns
Richer visualizations
More detailed descriptions

Print Adaptation (Screen → Print)

Layout Strategy:

Page breaks at logical points
Remove navigation, footer, interactive elements
Black and white (or limited color)
Proper margins for binding

Content Strategy:

Expand shortened content (show full URLs, hidden sections)
Add page numbers, headers, footers
Include metadata (print date, page title)
Convert charts to print-friendly versions

Email Adaptation (Web → Email)

Layout Strategy:

Narrow width (600px max)
Single column only
Inline CSS (no external stylesheets)
Table-based layouts (for email client compatibility)

Interaction Strategy:

Large, obvious CTAs (buttons not text links)
No hover states (not reliable)
Deep links to web app for complex interactions

Implement Adaptations

Apply changes systematically:

Responsive Breakpoints

Choose appropriate breakpoints:

Mobile: 320px-767px
Tablet: 768px-1023px
Desktop: 1024px+
Or content-driven breakpoints (where design breaks)

Layout Adaptation Techniques

CSS Grid/Flexbox: Reflow layouts automatically
Container Queries: Adapt based on container, not viewport
clamp(): Fluid sizing between min and max
Media queries: Different styles for different contexts
Display properties: Show/hide elements per context

Touch Adaptation

Increase touch target sizes (44x44px minimum)
Add more spacing between interactive elements
Remove hover-dependent interactions
Add touch feedback (ripples, highlights)
Consider thumb zones (easier to reach bottom than top)

Content Adaptation

Use display: none sparingly (still downloads)
Progressive enhancement (core content first, enhancements on larger screens)
Lazy loading for off-screen content
Responsive images (srcset, picture element)

Navigation Adaptation

Transform complex nav to hamburger/drawer on mobile
Bottom nav bar for mobile apps
Persistent side navigation on desktop
Breadcrumbs on smaller screens for context

IMPORTANT: Test on real devices, not just browser DevTools. Device emulation is helpful but not perfect.

NEVER:

Hide core functionality on mobile (if it matters, make it work)
Assume desktop = powerful device (consider accessibility, older machines)
Use different information architecture across contexts (confusing)
Break user expectations for platform (mobile users expect mobile patterns)
Forget landscape orientation on mobile/tablet
Use generic breakpoints blindly (use content-driven breakpoints)
Ignore touch on desktop (many desktop devices have touch)

Verify Adaptations

Test thoroughly across contexts:

Real devices: Test on actual phones, tablets, desktops
Different orientations: Portrait and landscape
Different browsers: Safari, Chrome, Firefox, Edge
Different OS: iOS, Android, Windows, macOS
Different input methods: Touch, mouse, keyboard
Edge cases: Very small screens (320px), very large screens (4K)
Slow connections: Test on throttled network

Remember: 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.

--- description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments. argument-hint: [TARGET=<value>] [CONTEXT=<value>] --- Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases. ## Assess Adaptation Challenge Understand what needs adaptation and why: 1. **Identify the source context**: - What was it designed for originally? (Desktop web? Mobile app?) - What assumptions were made? (Large screen? Mouse input? Fast connection?) - What works well in current context? 2. **Understand target context**: - **Device**: Mobile, tablet, desktop, TV, watch, print? - **Input method**: Touch, mouse, keyboard, voice, gamepad? - **Screen constraints**: Size, resolution, orientation? - **Connection**: Fast wifi, slow 3G, offline? - **Usage context**: On-the-go vs desk, quick glance vs focused reading? - **User expectations**: What do users expect on this platform? 3. **Identify adaptation challenges**: - What won't fit? (Content, navigation, features) - What won't work? (Hover states on touch, tiny touch targets) - What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop) **CRITICAL**: Adaptation is not just scaling - it's rethinking the experience for the new context. ## Plan Adaptation Strategy Create context-appropriate strategy: ### Mobile Adaptation (Desktop → Mobile) **Layout Strategy**: - Single column instead of multi-column - Vertical stacking instead of side-by-side - Full-width components instead of fixed widths - Bottom navigation instead of top/side navigation **Interaction Strategy**: - Touch targets 44x44px minimum (not hover-dependent) - Swipe gestures where appropriate (lists, carousels) - Bottom sheets instead of dropdowns - Thumbs-first design (controls within thumb reach) - Larger tap areas with more spacing **Content Strategy**: - Progressive disclosure (don't show everything at once) - Prioritize primary content (secondary content in tabs/accordions) - Shorter text (more concise) - Larger text (16px minimum) **Navigation Strategy**: - Hamburger menu or bottom navigation - Reduce navigation complexity - Sticky headers for context - Back button in navigation flow ### Tablet Adaptation (Hybrid Approach) **Layout Strategy**: - Two-column layouts (not single or three-column) - Side panels for secondary content - Master-detail views (list + detail) - Adaptive based on orientation (portrait vs landscape) **Interaction Strategy**: - Support both touch and pointer - Touch targets 44x44px but allow denser layouts than phone - Side navigation drawers - Multi-column forms where appropriate ### Desktop Adaptation (Mobile → Desktop) **Layout Strategy**: - Multi-column layouts (use horizontal space) - Side navigation always visible - Multiple information panels simultaneously - Fixed widths with max-width constraints (don't stretch to 4K) **Interaction Strategy**: - Hover states for additional information - Keyboard shortcuts - Right-click context menus - Drag and drop where helpful - Multi-select with Shift/Cmd **Content Strategy**: - Show more information upfront (less progressive disclosure) - Data tables with many columns - Richer visualizations - More detailed descriptions ### Print Adaptation (Screen → Print) **Layout Strategy**: - Page breaks at logical points - Remove navigation, footer, interactive elements - Black and white (or limited color) - Proper margins for binding **Content Strategy**: - Expand shortened content (show full URLs, hidden sections) - Add page numbers, headers, footers - Include metadata (print date, page title) - Convert charts to print-friendly versions ### Email Adaptation (Web → Email) **Layout Strategy**: - Narrow width (600px max) - Single column only - Inline CSS (no external stylesheets) - Table-based layouts (for email client compatibility) **Interaction Strategy**: - Large, obvious CTAs (buttons not text links) - No hover states (not reliable) - Deep links to web app for complex interactions ## Implement Adaptations Apply changes systematically: ### Responsive Breakpoints Choose appropriate breakpoints: - Mobile: 320px-767px - Tablet: 768px-1023px - Desktop: 1024px+ - Or content-driven breakpoints (where design breaks) ### Layout Adaptation Techniques - **CSS Grid/Flexbox**: Reflow layouts automatically - **Container Queries**: Adapt based on container, not viewport - **`clamp()`**: Fluid sizing between min and max - **Media queries**: Different styles for different contexts - **Display properties**: Show/hide elements per context ### Touch Adaptation - Increase touch target sizes (44x44px minimum) - Add more spacing between interactive elements - Remove hover-dependent interactions - Add touch feedback (ripples, highlights) - Consider thumb zones (easier to reach bottom than top) ### Content Adaptation - Use `display: none` sparingly (still downloads) - Progressive enhancement (core content first, enhancements on larger screens) - Lazy loading for off-screen content - Responsive images (`srcset`, `picture` element) ### Navigation Adaptation - Transform complex nav to hamburger/drawer on mobile - Bottom nav bar for mobile apps - Persistent side navigation on desktop - Breadcrumbs on smaller screens for context **IMPORTANT**: Test on real devices, not just browser DevTools. Device emulation is helpful but not perfect. **NEVER**: - Hide core functionality on mobile (if it matters, make it work) - Assume desktop = powerful device (consider accessibility, older machines) - Use different information architecture across contexts (confusing) - Break user expectations for platform (mobile users expect mobile patterns) - Forget landscape orientation on mobile/tablet - Use generic breakpoints blindly (use content-driven breakpoints) - Ignore touch on desktop (many desktop devices have touch) ## Verify Adaptations Test thoroughly across contexts: - **Real devices**: Test on actual phones, tablets, desktops - **Different orientations**: Portrait and landscape - **Different browsers**: Safari, Chrome, Firefox, Edge - **Different OS**: iOS, Android, Windows, macOS - **Different input methods**: Touch, mouse, keyboard - **Edge cases**: Very small screens (320px), very large screens (4K) - **Slow connections**: Test on throttled network Remember: 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.

{ "prompt": "---\ndescription: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments.\nargument-hint: [TARGET=<value>] [CONTEXT=<value>]\n---\n\nAdapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.\n\n## Assess Adaptation Challenge\n\nUnderstand what needs adaptation and why:\n\n1. **Identify the source context**:\n - What was it designed for originally? (Desktop web? Mobile app?)\n - What assumptions were made? (Large screen? Mouse input? Fast connection?)\n - What works well in current context?\n\n2. **Understand target context**:\n - **Device**: Mobile, tablet, desktop, TV, watch, print?\n - **Input method**: Touch, mouse, keyboard, voice, gamepad?\n - **Screen constraints**: Size, resolution, orientation?\n - **Connection**: Fast wifi, slow 3G, offline?\n - **Usage context**: On-the-go vs desk, quick glance vs focused reading?\n - **User expectations**: What do users expect on this platform?\n\n3. **Identify adaptation challenges**:\n - What won't fit? (Content, navigation, features)\n - What won't work? (Hover states on touch, tiny touch targets)\n - What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop)\n\n**CRITICAL**: Adaptation is not just scaling - it's rethinking the experience for the new context.\n\n## Plan Adaptation Strategy\n\nCreate context-appropriate strategy:\n\n### Mobile Adaptation (Desktop → Mobile)\n\n**Layout Strategy**:\n- Single column instead of multi-column\n- Vertical stacking instead of side-by-side\n- Full-width components instead of fixed widths\n- Bottom navigation instead of top/side navigation\n\n**Interaction Strategy**:\n- Touch targets 44x44px minimum (not hover-dependent)\n- Swipe gestures where appropriate (lists, carousels)\n- Bottom sheets instead of dropdowns\n- Thumbs-first design (controls within thumb reach)\n- Larger tap areas with more spacing\n\n**Content Strategy**:\n- Progressive disclosure (don't show everything at once)\n- Prioritize primary content (secondary content in tabs/accordions)\n- Shorter text (more concise)\n- Larger text (16px minimum)\n\n**Navigation Strategy**:\n- Hamburger menu or bottom navigation\n- Reduce navigation complexity\n- Sticky headers for context\n- Back button in navigation flow\n\n### Tablet Adaptation (Hybrid Approach)\n\n**Layout Strategy**:\n- Two-column layouts (not single or three-column)\n- Side panels for secondary content\n- Master-detail views (list + detail)\n- Adaptive based on orientation (portrait vs landscape)\n\n**Interaction Strategy**:\n- Support both touch and pointer\n- Touch targets 44x44px but allow denser layouts than phone\n- Side navigation drawers\n- Multi-column forms where appropriate\n\n### Desktop Adaptation (Mobile → Desktop)\n\n**Layout Strategy**:\n- Multi-column layouts (use horizontal space)\n- Side navigation always visible\n- Multiple information panels simultaneously\n- Fixed widths with max-width constraints (don't stretch to 4K)\n\n**Interaction Strategy**:\n- Hover states for additional information\n- Keyboard shortcuts\n- Right-click context menus\n- Drag and drop where helpful\n- Multi-select with Shift/Cmd\n\n**Content Strategy**:\n- Show more information upfront (less progressive disclosure)\n- Data tables with many columns\n- Richer visualizations\n- More detailed descriptions\n\n### Print Adaptation (Screen → Print)\n\n**Layout Strategy**:\n- Page breaks at logical points\n- Remove navigation, footer, interactive elements\n- Black and white (or limited color)\n- Proper margins for binding\n\n**Content Strategy**:\n- Expand shortened content (show full URLs, hidden sections)\n- Add page numbers, headers, footers\n- Include metadata (print date, page title)\n- Convert charts to print-friendly versions\n\n### Email Adaptation (Web → Email)\n\n**Layout Strategy**:\n- Narrow width (600px max)\n- Single column only\n- Inline CSS (no external stylesheets)\n- Table-based layouts (for email client compatibility)\n\n**Interaction Strategy**:\n- Large, obvious CTAs (buttons not text links)\n- No hover states (not reliable)\n- Deep links to web app for complex interactions\n\n## Implement Adaptations\n\nApply changes systematically:\n\n### Responsive Breakpoints\n\nChoose appropriate breakpoints:\n- Mobile: 320px-767px\n- Tablet: 768px-1023px\n- Desktop: 1024px+\n- Or content-driven breakpoints (where design breaks)\n\n### Layout Adaptation Techniques\n\n- **CSS Grid/Flexbox**: Reflow layouts automatically\n- **Container Queries**: Adapt based on container, not viewport\n- **`clamp()`**: Fluid sizing between min and max\n- **Media queries**: Different styles for different contexts\n- **Display properties**: Show/hide elements per context\n\n### Touch Adaptation\n\n- Increase touch target sizes (44x44px minimum)\n- Add more spacing between interactive elements\n- Remove hover-dependent interactions\n- Add touch feedback (ripples, highlights)\n- Consider thumb zones (easier to reach bottom than top)\n\n### Content Adaptation\n\n- Use `display: none` sparingly (still downloads)\n- Progressive enhancement (core content first, enhancements on larger screens)\n- Lazy loading for off-screen content\n- Responsive images (`srcset`, `picture` element)\n\n### Navigation Adaptation\n\n- Transform complex nav to hamburger/drawer on mobile\n- Bottom nav bar for mobile apps\n- Persistent side navigation on desktop\n- Breadcrumbs on smaller screens for context\n\n**IMPORTANT**: Test on real devices, not just browser DevTools. Device emulation is helpful but not perfect.\n\n**NEVER**:\n- Hide core functionality on mobile (if it matters, make it work)\n- Assume desktop = powerful device (consider accessibility, older machines)\n- Use different information architecture across contexts (confusing)\n- Break user expectations for platform (mobile users expect mobile patterns)\n- Forget landscape orientation on mobile/tablet\n- Use generic breakpoints blindly (use content-driven breakpoints)\n- Ignore touch on desktop (many desktop devices have touch)\n\n## Verify Adaptations\n\nTest thoroughly across contexts:\n\n- **Real devices**: Test on actual phones, tablets, desktops\n- **Different orientations**: Portrait and landscape\n- **Different browsers**: Safari, Chrome, Firefox, Edge\n- **Different OS**: iOS, Android, Windows, macOS\n- **Different input methods**: Touch, mouse, keyboard\n- **Edge cases**: Very small screens (320px), very large screens (4K)\n- **Slow connections**: Test on throttled network\n\nRemember: 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.", "variables": [], "notes": "Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.", "metadata": { "source": { "provider": "github-codex-prompts", "repository": "https://github.com/itsaark/lore", "path": ".codex/prompts/adapt.md", "ref": "bb4c34961c1c34828e871b5df114457cea5028dd", "url": "https://github.com/itsaark/lore/blob/bb4c34961c1c34828e871b5df114457cea5028dd/.codex/prompts/adapt.md", "key": "itsaark/lore/.codex/prompts/adapt.md" } } }

adapt

About

description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments. argument-hint: [TARGET=] [CONTEXT=]

Assess Adaptation Challenge

Plan Adaptation Strategy

Mobile Adaptation (Desktop → Mobile)

Tablet Adaptation (Hybrid Approach)

Desktop Adaptation (Mobile → Desktop)

Print Adaptation (Screen → Print)

Email Adaptation (Web → Email)

Implement Adaptations

Responsive Breakpoints

Layout Adaptation Techniques

Touch Adaptation

Content Adaptation

Navigation Adaptation

Verify Adaptations

Use it

Manifest

Reviews