adapt

Rethink designs for different screens, devices, and contexts while maintaining consistency.

- Assess source and target contexts (device type, input method, screen size, connection speed, usage patterns) to identify what won't fit or work across platforms

- Apply context-specific strategies: single-column layouts and touch targets for mobile, two-column hybrid layouts for tablet, multi-column and hover states for desktop, narrow widths and inline CSS for email

- Use responsive techniques including CSS Grid/Flexbox, media queries, container queries, and clamp() for fluid sizing; increase touch targets to 44x44px minimum and remove hover dependencies on touch devices

- Test on real devices across orientations, browsers, and input methods rather than relying solely on browser emulation

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

MANDATORY PREPARATION

Invoke /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.

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?