Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.
MANDATORY PREPARATION
Users start this workflow with /adapt. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first. Additionally gather: target platforms/devices and usage contexts.
Consult the responsive reference for narrow-first adaptation, fluid behavior, and container-query strategy. Consult the spacing system when adaptation problems are really grouping, rhythm, or width-discipline issues. Consult the cognitive load when smaller screens or constrained contexts amplify too many visible choices at once.
Assess Adaptation Challenge
Understand what needs adaptation and why:
- Identify the source context:
- What was it designed for originally? (Wide-layout web? Compact responsive web?) - What assumptions were made? (Large screen? Mouse input? Fast connection?) - What works well in current context?
- Understand target context:
- Viewport / context: Narrow, medium, wide, TV, embedded, 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? (Wide-layout patterns in narrow layouts, hover-only patterns in coarse-pointer contexts)
CRITICAL: Adaptation is not just scaling - it's rethinking the experience for the new context.
Treat smaller screens as real constraints, not as desktop layouts that got squeezed in the wash.
Plan Adaptation Strategy
Create context-appropriate strategy:
First Principles
- Shrink the canvas first: Start with the smaller constraint and solve the core task there
- Design narrow layouts as their own layout: Don't just compress wide-layout relationships proportionally
- Preserve natural widths: Use max-widths and content-appropriate widths instead of percentage worship
- Let large elements shrink faster than small ones: Relationships change across breakpoints
Narrow-Layout Adaptation (Wide → Compact)
Layout Strategy:
- Single column instead of multi-column
- Vertical stacking instead of side-by-side
- Components should use the width they actually need; full-width is fine when helpful, not as a reflex
- Compact navigation instead of assuming a persistent top or side structure
Interaction Strategy:
- Touch targets 44x44px minimum (not hover-dependent)
- Gesture support where appropriate and discoverable
- Edge-attached or anchored overlays instead of cramped dropdowns when space is tight
- Keep repeated actions in reachable zones for compact touch-capable layouts
- Larger hit 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:
- Clear compact navigation entry points such as drawers, accordions, or condensed menus
- Reduce navigation complexity
- Sticky headers for context
- Back button in navigation flow
Mid-Width Adaptation
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
- Preserve generous target sizes while allowing denser layouts than the narrowest viewport
- Side navigation drawers
- Multi-column forms where appropriate
Wide-Layout Expansion
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)
- Use columns to rebalance narrow content instead of making forms or reading widths too wide
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:
- Narrow: 320px-767px
- Medium: 768px-1023px
- Wide: 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
- Max-widths: Keep forms, text blocks, and sidebars at natural widths until the viewport forces change
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: nonesparingly (still downloads) - Progressive enhancement (core content first, enhancements on larger screens)
- Lazy loading for off-screen content
- Responsive images (
srcset,pictureelement)
Navigation Adaptation
- Transform complex navigation into compact menus, drawers, or accordion structures on narrow layouts
- Persistent side navigation on desktop
- Breadcrumbs or compact context cues on narrower layouts
IMPORTANT: Test on real devices, not just browser DevTools. Device emulation is helpful but not perfect.
NEVER:
- Hide core functionality in narrow layouts (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 responsive web behavior in a given input context
- Forget narrow landscape or medium-width window states
- Use generic breakpoints blindly (use content-driven breakpoints)
- Ignore touch on desktop (many desktop devices have touch)
- Scale desktop relationships down proportionally and call it responsive design
- Make components fluid when they don't actually benefit from scaling
Verify Adaptations
Test thoroughly across contexts:
- Real devices: Test on actual touch-capable browsers, laptops/desktops, and constrained hardware where relevant
- Different orientations: Portrait and landscape
- Different browsers: Safari, Chrome, Firefox, Edge
- Different OS: Windows, macOS, Linux, ChromeOS, and touch-capable browser environments when relevant
- 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 responsive web design expert. Make experiences that feel well-adapted to each web context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly.