← ClaudeAtlas

impeccable-adaptlisted

Recontextualize an existing web design for a different screen size, device, platform, or use case. Use when adapting rather than extending a design - the trap is treating adaptation as scaling, when the real job is rethinking the experience for the new context. Covers assessing what breaks, phone-to-tablet restructuring, orientation and foldables, platform-to-platform idiom translation, and verifying custom controls under real touch input.
JZKK720/cubecloud-skills-bundle-kit · ★ 3 · AI & Automation · score 69
Install: claude install-skill JZKK720/cubecloud-skills-bundle-kit
Adapt 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. **Web only** (mobile web included). Native platforms (`ios` / `android` / `adaptive`) route to the native adaptation guide instead; if the project is native, switch to it now. --- ## 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 rethinking the experience for the new context, not scaling pixels. ## Plan Adaptation Strategy Create context-appropriate strateg